Ext ComboBox 的简单数据绑定方式 在Ext.js中构建下拉框时，最常见的做法是直接向ComboBox的store传入一个二维数组。例如，第一个元素作为提交值，第二个元素作为显示文本。这种方式简单直接，适合数据量小且固定不变的场景。 复制代码 代码如下: var p_years = new
Ext ComboBox组件Store数据格式用法详解
作者：技术拾光
时间：2026-06-10
浏览：301
文章目录
Ext ComboBox 的简单数据绑定方式
在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的时候，默认提交值与显示值为同一个。
});
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的时候，默认提交值与显示值为同一个。
});
注释中展示了两种模式。第一种是标准的键值对数组：['11', '2011']，提交值为'11'，显示值为'2011'。第二种更简洁，直接传入一个纯值数组，例如[2011, 2012, 2013]，此时提交值与显示值完全相同，适合不需要区分value和text的场合。
动态数据加载：使用 JsonStore
在实际业务中，下拉框的选项通常需要从数据库动态获取。以下示例展示了更规范、更灵活的做法：通过后端加载字典数据来渲染下拉框。
复制代码 代码如下:
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
});
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指定数据根节点为"objs"。此外，通过监听store的load事件，在列表最前面插入一个“全部”选项，常用于筛选场景。这样ComboBox便绑定了动态数据，提交时取valueField，显示时取displayField，结构清晰且规范。
实用工具推荐
电子包浆
使用 ›绿化、压缩、噪点和虚拟水印，自由调节做旧程度。
图片压缩
使用 ›选择画质和输出格式，预览压缩前后的大小。
相关文章