学步园

Ext.require('Ext.*');
Ext.onReady(function(){
  //定义ComboBox模型
  Ext.define('State', {
	  extend: 'Ext.data.Model',
	  fields: [
		  {type: 'int', name: 'id'},
		  {type: 'string', name: 'cname'}
	  ]
  });
 
 //加载省数据源
  var store = Ext.create('Ext.data.Store', {
	  model: 'State',
	  proxy: {
		  type: 'ajax',
		  url: 'city.asp?act=sheng&n='+new Date().getTime()+''
	  },
	  autoLoad: true,
	  remoteSort:true
  });
  //加载市数据源
  var store1 = Ext.create('Ext.data.Store', {
	  model: 'State',
	  proxy: {
		  type: 'ajax',
		  url: 'city.asp?act=shi&n='+new Date().getTime()+''
	  },
	  autoLoad: false,
	  remoteSort:true
  });
  //加载区数据源
  var store2 = Ext.create('Ext.data.Store', {
	  model: 'State',
	  proxy: {
		  type: 'ajax',
		  url: 'city.asp?act=qu&n='+new Date().getTime()+''
	  },
	  autoLoad: false,
	  remoteSort:true
  });
	
  
  
  Ext.create("Ext.panel.Panel",{
	renderTo: document.body,
	width:290,
	height:220,
	title:"城市三级联动",
	plain: true,
	margin:'30 10 0 80',
	bodyStyle: "padding: 45px 15px 15px 15px;",
	defaults :{
		autoScroll: true,
		bodyPadding: 10
	},
	items:[{
		xtype:"combo",
		name:'sheng',
		id : 'sheng',
		fieldLabel:'选择省',
		displayField:'cname',
		valueField:'id',
		store:store,
		triggerAction:'all',
		queryMode: 'local', 
		selectOnFocus:true,
		forceSelection: true,
		allowBlank:false,
		editable: true,
		emptyText:'请选择省',
		blankText : '请选择省',
		listeners:{   
			select:function(combo, record,index){
				 try{
					 //userAdd = record.data.name;
					 var parent=Ext.getCmp('shi');
					 var parent1 = Ext.getCmp("qu");
					 parent.clearValue();
					 parent1.clearValue();
					 parent.store.load({params:{param:this.value}});
				 }
				 catch(ex){
					 Ext.MessageBox.alert("错误","数据加载失败。");
				 }
			}
		}
		},
		{
		xtype:"combo",
		name:'shi',
		id : 'shi',
		fieldLabel:'选择市',
		displayField:'cname',
		valueField:'id',
		store:store1,
		triggerAction:'all',
		queryMode: 'local',
		selectOnFocus:true,
		forceSelection: true,
		allowBlank:false,
		editable: true,
		emptyText:'请选择市',
		blankText : '请选择市',
		listeners:{   
			select:function(combo, record,index){
				 try{
					 //userAdd = record.data.name;
					 var parent = Ext.getCmp("qu");
					 parent.clearValue();
					 parent.store.load({params:{param:this.value}});
				 }
				 catch(ex){
					 Ext.MessageBox.alert("错误","数据加载失败。");
				 }
			}
		}
		},
		{
		xtype:"combo",
		name:'qu',
		id : 'qu',
		fieldLabel:'选择区',
		displayField:'cname',
		valueField:'id',
		store:store2,
		triggerAction:'all',
		queryMode: 'local',
		selectOnFocus:true,
		forceSelection: true,
		allowBlank:false,
		editable: true,
		emptyText:'请选择区',
		blankText : '请选择区',
		}
	]
  })
});