Extjs省市互联简单例子

 

 

Ext.onReady(function(){

	//省级数据
	var dataProvice=[
	  ['广东','广东'],
	  ['江苏','江苏']
	];
	
	//广东市市级数据
	var dataCityGuangDong=[
	  ['广州','广州'],
	  ['深圳','深圳'],
	  ['佛山','佛山'],
	  ['东莞','东莞'],
	  ['珠海','珠海'],
	  ['中山','中山'],
	  ['汕头','汕头']
	];
	
	//江苏市市级数据
	var dataCityJiangSu=[
	  ['苏州','苏州'],
	  ['南京','南京'],
	  ['常州','常州']
	];
	
	
	
	//省级库
	var storeProvice=new Ext.data.SimpleStore({
	    fields:['value','text'],
	    data:dataProvice
	});

	//市级库
	var storeCity=new Ext.data.SimpleStore({
        fields:['value','text'],
        data:[]
	});
	
	
	//市级下拉框
	var comboCity=new Ext.form.ComboBox({
	   store:storeCity,
	   emptyText:'请选择',
	   mode:'local',
	   triggerAction:'all',
	   valueField:'value',
	   displayField:'text',
	   readOnly:false
	});
	
	//省级下拉框
	var comboProvice=new Ext.form.ComboBox({
		store:storeProvice,
		emptyText:'请选择',
		mode:'local',
		triggerAction:'all',
		valueField:'value',
		displayField:'text',
		readOnly:false
		
	});
	
	comboProvice.on('select',function(comboBox){
	   var provice=comboBox.getValue();
	   if(provice=='广东'){
	      storeCity.loadData(dataCityGuangDong);
	   }else if(provice=='江苏'){
	       storeCity.loadData(dataCityJiangSu);
	   }
	});
	
	comboProvice.render('comboProvice');
	comboCity.render('comboCity');
	
	var upload=new Ext.form.FormPanel({
	    labelAlign:'right',
	    title:'upload plane',
	    labelWidth:50,
	    frame:true,
	    fileUpload:true,
	    width:280,
	    items:[{
	       xtype:'textfield',
	       fieldLabel:'文本框',
	       name:'file',
	       inputType:'file'
	    }]
	});
    upload.render('upload');
	
});

在html中加入:

<input id="comboProvince" type="text"/><input id="comboCity" type="text"/>