ExtJS ComboBox下拉列表store数据格式用法详解

在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，结构清晰且符合标准。