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);if (n) {node.appendChild(n);}}node.endUpdate();this.runCallback(callback, scope || node, );} catch (e) {this.handleFailure(response);}}});Ext.override(Ext.form.ComboBox, {onViewClick : function(doFocus) {var index = this.view.getSelectedIndexes(), 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');});
页:
[1]