Extjs 常用Combo组件

//数据源本地，下拉列表不分页

var status_store = new Ext.data.JsonStore({
	autoLoad : true,
        fields:['id', 'text' ],
        data: [
        	{id:'1', text: '已审批'},
            {id:'2', text: '未审批'},
            {id:'3', text: '未通过'}           
        ]
});
	

var status_combo = new Ext.form.ComboBox({
	id : 'cms_status',
	fieldLabel : '审批状态',
	store : status_store,
	hiddenName : 'id',
	displayField : 'text',// 名称
	valueField : 'id',// 值
	mode : 'local',//本地
	forceSelection : true,
	triggerAction : 'all',
	width : 170,
	emptyText : '选择审批状态',
	selectOnFocus : true
});

//数据源非本地，下拉列表不分页 图1

var xb_Combox = new Ext.form.ComboBox({
	triggerAction : 'all',
	forceSelection : true,
	editable : false,// 不可编辑
	emptyText : '请选择',
	fieldLabel : '性别',
	name : 'xb',
	width : 180,
	displayField : 'text',// 名称
	valueField : 'id',// 值
	hiddenName : 'xb',
	store : new Ext.data.JsonStore({
		autoLoad : true,
		url : 'GetDic/XbDic.action?format=json',
		root : 'list',
		fields : ['id', 'text']
	}),
	listeners : {
		select : function(_combo) {
			if (_combo.store.getAt(0).get('id') != '') {
				var _comboRecord = new Ext.data.Record.create({
					name : 'id',
					name : 'text'
				});
				_combo.store.insert(0, new _comboRecord({
					id : '',
					text : '请选择'
				}));
			}
		}
	}
});

//数据源非本地，下拉列表框分页 图2

var mz_Combox = new Ext.form.ComboBox({
	fieldLabel : '名族',
	name : 'mz',
	triggerAction : 'all',
	forceSelection : true,
	editable : false,
	pageSize : 10,
	emptyText : '请选择',
	displayField : 'text',// 名称
	valueField : 'id',// 值
	hiddenName : 'mz',//form表单提交后，后台获取值
	width : 180,
	listWidth : 240,
	store : new Ext.data.JsonStore({
		autoLoad : true,
		url : 'GetDic/MzDic.action?format=json',
		root : 'list',
		baseParams : {
			limit : 10,
			start : 0
		},
		totalProperty : 'totalCount',
		fields : ['id', 'text']
	})
});

//数据源非本地，下拉列表树形结构 图3

Ext.override(Ext.tree.TreeLoader, {
	processResponse : function(response, node, callback, scope) {
	var json = response.responseText;
	json = json.slice(json.indexOf("["), json.lastIndexOf("]")+ 1);
	try {
		var o = response.responseData || Ext.decode(json);
		node.beginUpdate();
		for (var i = 0, len = o.length; i < len; i++) {
			var n = this.createNode(o[i]);
			if (n) {
				node.appendChild(n);
			}
		}
		node.endUpdate();
		this.runCallback(callback, scope || node, [node]);
	} catch (e) {
		this.handleFailure(response);
	}
	}
});

Ext.override(Ext.form.ComboBox, {
	onViewClick : function(doFocus) {
	var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
	if (r) {
		this.onSelect(r, index);
	} else if (s.getCount() === 0) {
		this.collapse();
	}
	if (doFocus !== false) {
		this.el.focus();
	}
	}
});

var hjd_Combox_edit = new Ext.form.ComboBox({
	fieldLabel : '户籍地',
	emptyText : '请选择',
	width : 180,// comboBox宽度
	maxHeight : 320,// comboBox下拉列表框的高度
	listWidth : 350,// 设置下拉框的宽度，默认和comboBoxTree的宽度相等
	name : '_hjd',
	store : new Ext.data.SimpleStore({
		fields : [],
		data : [[]]
	}),
	editable : false,
	shadow : false,
	hiddenValue : '',
	// hiddenName : 'hjd',
	mode : 'local',
	triggerAction : 'all',
	tpl : '<tpl for="."><div style="height:200px"><div id="hjdTree_edit"></div></div></tpl>',
	selectedClass : '',
	onSelect : Ext.emptyFn
});

var hjdTree_edit = new Ext.tree.TreePanel({
	loader : new Ext.tree.TreeLoader({
		dataUrl : 'GetDic/XzqhTreeDic.action?format=json'
	}),
	border : false,
	root : new Ext.tree.AsyncTreeNode({
		text : '新疆维吾尔自治区',
		id : '650000',
		expanded : true
	})
});

hjdTree_edit.on('click', function(node) {
	hjd_Combox_edit.setValue(node.text);
	hjdHidden.setValue(node.id)
	hjd_Combox_edit.onSelect(node.id);
	hjd_Combox_edit.collapse();
});

hjd_Combox_edit.on('expand', function() {
	hjdTree_edit.render('hjdTree_edit');
});