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文档