extjsにおけるComboBoxの学習

Ext.onReady(function(){
	Ext.util.CSS.swapStyleSheet("theme", "../resources/css/"
			+ window.parent.styleCssValue); 
	 Ext.QuickTips.init();//       ，       
	 Ext.lib.Ajax.defaultPostHeader += "; charset=utf-8";
	 
	 this.viewport= new Starit.Test.OdnTestViewport();
});


Starit.Test.OdnTestViewport = Ext.extend(Ext.Viewport,{
	constructor:function(){
		this.initView();
	 	Starit.Test.OdnTestViewport.superclass.constructor.call(this,{
	 		renderTo:Ext.getBody(),
	 		layout:'border'
	 	})
	},
	initView:function(){
		this.gridPanel = new Starit.Test.OnuGrid({viewport:this});
		this.items = [this.gridPanel];
	}
});


//GridPanel     
Starit.Test.OnuGrid = Ext.extend(Ext.grid.GridPanel, {
	constructor : function(cfg) {
		//copy          
		var cfg = cfg || {};
		Ext.apply(this, cfg);
		//     
		this.store = new Ext.data.Store({
			proxy : new Ext.data.HttpProxy({url : 'XXXX.action', method : 'POST'}),
			reader : new Ext.data.JsonReader(
				{totalProperty:'total',root:'root'},
				[{name : 'instanceId'}, {name : 'geoName'}, {name : 'subGeoName'}, 
				{name : 'officeName'}, {name : 'factoryName'}, {name : 'instanceName'}, {name : 'ip'},
				{name : 'devType'},{name : 'userCount'}]
			)
		});
        this.initCombo();//        
        Starit.Test.OnuGrid.superclass.constructor.call(this, {
			title : 'ONU  ',
			id: '_onuGrid',
			region :'center',
			border : false,
			split:true,
			loadMask : {
				msg : '      ,   ...'
			},
			viewConfig:{
			    forceFit:true
			},
			cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
				{header : 'XX',dataIndex:'instanceId',  align:'center',width:100,     hidden : true},
				{header : ' ', dataIndex:'geoName',          align:'center', width:100,     sortable : true}, 
				{header : '  ',dataIndex:'subGeoName',      align:'center', width:100,    sortable : true}, 
				{header : '  ', dataIndex: 'officeName',     align:'center',  width: 100,   sortable : true},
				{header : 'XX',	 dataIndex: 'factoryName', align:'center', width:100, sortable : true},
				{header : 'XX', dataIndex: 'instanceName',align:'center', width:260,sortable : true}, 
				{header : 'XX', dataIndex: 'ip',       align:'center',      width:160, sortable : true},
				{header : '    ', dataIndex: 'devType',align:'center',    width:100,  sortable : true },
				{header : 'XX',dataIndex: 'userCount', align:'center',    width:110,  sortable : true},
				{header : 'XX',dataIndex: 'test',       align:'center',     width:110,  sortable : true, renderer: this.testRender}
			]),
//       
			bbar: new Ext.PagingToolbar({
				pageSize : 30,
				store : this.store,
				firstText : '   ',
				nextText : '   ',
				prevText : '   ',
				refreshText : '  ',
				lastText : '    ',
				beforePageText : '  ',
				afterPageText : ' / {0} ',
				displayInfo : true,
				displayMsg : '    {0}    {1}    ，   {2}  ',
				doLoad:function(C){			//            
					var B={};
					A=this.paramNames;
					B[A.start]=C;
					B[A.limit]=this.pageSize;
					B['cityId']=cityId;
					B['countyId'] = countyId;
					B['officeId'] = officeId;
					B['oltId'] = oltId;
					B['factoryId'] = factoryId ;
					B['name'] = name ;
					if(this.fireEvent("beforechange",this,B)!==false){
						this.store.load({params: B});
					}
				},
				emptyMsg : "    "
			}),
//   
			tbar: new Ext.Toolbar({
				items : [
					' ：', this.cityCombo, '-', '  ：', this.countyCombo, '-','  ：', this.officeCombo, '-',
					'  ：', this.factoryCombo,'-', 'OLT：', this.oltCombo, '-','    :', this.nameText,'-',
				    {text : '  ',iconCls : 'find', handler :this.doQuery,scope : this},'->','-',
				    {text : '     ',iconCls : 'update', handler :this.userTest,scope : this},'-'
				]
			})
        });
        this.initListener();
	},


initCombo:function(){
		this.cityCombo = new Ext.form.ComboBox({
			width : 80,
			editable : false,
			valueField : "geoid",
			displayField : "geoname",
			mode : 'local',
			selectAllOn:true,
			triggerAction : 'all',
			allowBlank : true,
			emptyText : '   ',
			store:  new Ext.data.Store({
				proxy : new Ext.data.HttpProxy({url : '../XXXXX.action',method : 'POST'}),
				reader : new Ext.data.JsonReader({}, [
                      {name : 'geoid'}, {name : 'geoname'}
                 ])
			})	
		});
}




  ：
displayField: 'name',valueField: 'id'：combobox            ，          

mode: 'local'：           ，           ，        ，           

      'remote'           ，              。
triggerAction: 'all'：    ”all”,      ”query”    ，       ，     ，       ，
      all  ，           。

editable: false:     ，combobox         ，      false，





this.cityCombo.store.load({callback:function(){
			this.cityCombo.setValue(-1);
		},scope:this});
               
		this.cityCombo.on("select", this.countyLoad, this);

on             
      select          countyLoad  
   API