正文
Extjs3 combobox使用
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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 为测试用comboboxvar 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即可。。。。。
