在Ext.js开发中,构建下拉框时,开发者经常会直接向ComboBox的store传入一个二维数组。数组中第一个元素作为提交值,第二个作为显示文本。这种方式简单直接,尤其适合数据量较小且固定不变的场景。
复制代码 代码如下:
var p_years = new Ext.form.ComboBox( {
fieldLabel : '统计年份',
anchor : anchor_w,
mode : 'remote',
maxHeight:100,
triggerAction : 'all',
selectOnFocus : true,
forceSelection : true,
editable : false,
//store :[['11', '2011'], ['12', '2012'],['13', '2013']] //此为第一种
store:[2011,2012,2013,2014,2015,2016,2017,2018] //此为第二种,当没有制定value和text的时候,默认提交值与显示值为同一个。
});
如上注释所示,代码演示了两种store数据格式。第一种是标准的键值对数组,例如['11', '2011'],其中'11'为提交值,'2011'为显示文本。第二种则更为简洁,直接传入纯数值数组,如[2011, 2012, 2013],此时不区分value与text,提交值和显示值均为同一数字。
这种轻量级写法虽然简便,但在实际业务中,通常需要从数据库动态获取数据。下面的代码展示了一种更规范、更灵活的方式:通过后端加载字典数据来渲染下拉列表。
复制代码 代码如下:
var proj_main_store = new Ext.data.JsonStore({
url : "************",
fields : ['TEXT', 'VALUE'],
root : "objs",
baseParams : {
"obj/dicttypeid" : "BM_IMPORTANT_PROJ"
}
});
proj_main_store.addListener("load", function(){
proj_main_store.insert(0, new Ext.data.Record({
'TEXT' : '全部',
'VALUE' : ""
}));
});
var proj_main_type = new Ext.form.ComboBox( {
fieldLabel : '重点工程',
anchor : anchor_w,
mode : 'remote',
triggerAction : 'all',
selectOnFocus : true,
forceSelection : true,
editable : false,
valueField : 'VALUE',
displayField : 'TEXT',
store : proj_main_store
});
此处使用了JsonStore,通过配置url和baseParams向后端发送请求获取数据。fields属性指定了需要使用的数据字段,root则告诉Ext.js数据根节点为"objs"。这里还应用了一个实用小技巧:在store加载完毕后,通过监听load事件,在列表最前面插入一个“全部”选项,这在筛选场景中非常常见。通过这种方式,ComboBox成功绑定动态数据,提交时取valueField,显示时取displayField,结构清晰且符合标准。
