Combobox 在程序中应用十分普遍,每个combobox的选项 一般对应两个值:一个用于前台显示的值,一个与显示值对应的value值。在后台获取value的值需使用combobox的 HiddenName 属性,获取显示值使用name值。
(1)在extjs中combobox中的选项的数据源可以静态加载(local)也可用选择远程加载(remote)。数据源加载方式通过属性 mode 设置。
(2)属性 displayField,valueField 用于设置combobox中选项对用的 key值。设置值为string类型。这两个设置值与数据源中的key相对应。即数据源中的字段命名要和这两个属性对应好,这样才能将选项数据加载。
测试代码:
Ext.onReady(function(){
//根据需要 注释相关代码 测试
/// comb1 代码添加处
/// comb2代码添加处
// 界面整体布局,comb1,comb2 为测试用combobox
var qF = new Ext.form.FormPanel({
region : 'center',
margins : '3 3 3 3',
height:480,
title : '<span class="commoncss"><span>',
collapsible : true,
border : true,
labelWidth : 50, // 标签宽度
labelAlign : 'right', // 标签对齐方式
bodyStyle:'padding:10 10 10 10',
layout:'column',
autoScroll:true,
items:[
{
columnWidth : .6,
layout : 'form',
labelWidth :80, // 标签宽度
defaultType : 'textfield',
border : false,
items : [comb1]
},
{
columnWidth : .6,
layout : 'form',
labelWidth :80, // 标签宽度
defaultType : 'textfield',
border : false,
items : [comb2]
}
]
});
var viewport = new Ext.Viewport({
layout : 'border',
items : [qF]
});
});
comb1测试数据:本地静态数据源
var comb1Store = new Ext.data.SimpleStore({
fields : ['SHOWNAME', 'VALUE'],
data : [['类型1', '0'], ['类型2', '1']]
});
var comb1 = new Ext.form.ComboBox({
mode : 'local',//本地数据
store : comb1Store,
width : 300,
displayField : 'SHOWNAME',
valueField : 'VALUE',
fieldLabel : '类型'
});
对combobox添加自动补齐功能,对comb1 添加一个属性即可:typeAhead:true
comb2 远程数据加载测试:
var comb2store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : WEB_CONTEXT+'xxx.action'
}),
reader : new Ext.data.JsonReader({}, [{
name : 'VALUE'
}, {
name : 'SHOWNAME'
}])
});
ds.load();
// load函数在页面加载后,数据源已经在本地了。
// 这个数据源在页面加载时已经加载到本地
var comb 2 = new Ext.form.ComboBox({
mode : 'local',//本地数据
store : comb2store,
width : 300,
triggerAction: 'all',
displayField : 'SHOWNAME',
valueField : 'VALUE',
fieldLabel : '类型'
});
将上面 mode : 'remote', 数据源为远程获取。
triggerAction : ‘all’ 属性添加上。不添加的话,remote下不加载数据。而且选中某个项目后 点击trigger (右边小箭头)不会显示列表了,只显示选中项目。
triggerAction: 'all', //默认为"query",选择某值后,再次选择时只出现匹配选项,"all"表示再次选择时出现所有项
(3) 上面comb2的两种数据源的设置中,设置为remote的状态下,在用户第一次点击 trigger时,需要和后台交互。local的情况不会。
(4) 添加自动补齐的情况下,comb2,在remote的情况下每次激发自动补齐时,都需要与后台交互,而local的情况则不会。而且remote的情况下会出现自动补齐后,由于再次与后台交互导致combo的已输入内容别覆盖,显示列表中第一个选项的情况。解决方法:1.直接将combobox的mode设置为local,2.给数据源添加方法将combobox设置为local。
combo2store.on("load",function(){
combo2.mode='local';
});
(5) 刚刚又发现了一个远程data store,然后本地处理的方法。 给store 设置属性 autoLoad:true ,这样store会自动加载,combobox的属性mode 设置为local即可。。。。。