|
Ext中的ComboBox即下拉框，下拉框的数据可以是静态的，也可以是动态的（即从数据库中读取，一般为JSon格式的数据）。以下分别列举了两种不同类型数据的例子：
1、静态数据：
//定义静态数据
var channelData = [
['ALL','全部'],['SM','短信'],['FAX','传真'],['EMAIL','邮件'],['VOX','语音']
];
//定义ComboBox 的数据源
var channelStore = new Ext.data.SimpleStore({
fields:['channel_id','channel_name'],
data:channelData
});
//定义下拉框
var channelCombo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
forceSelection: true,
mode: 'local',
width:80,
store: channelStore,
valueField: 'channel_id', //下拉框具体的值（例如值为SM，则显示的内容即为‘短信’）
displayField: 'channel_name'//下拉框显示内容
});
做好以上的设置，静态的ComboBox就可以了使用了。
2、动态数据
//定义数据源
var domainStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'skillPolicyAction.do?operate=getDomain' //action中定义的方法
}),
reader: new Ext.data.JsonReader({
root:'root',
totalProperty : 'totalProperty'
},['SKILL_DOMAIN_ID','SKILL_DOMAIN_NAME']
)
});
//定义下拉框
var domainCombo = new Ext.form.ComboBox({
store:domainStore,
id:'domain',
fieldLabel:'技能域',
typeAhead: true,
displayField:'SKILL_DOMAIN_NAME',
valueField:'SKILL_DOMAIN_ID',
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'---请选择---',
selectOnFocus:true,
anchor:'70%'
});
然后在Ext.onReady(function(){
......
//定义数据源中调用action中方法所需要的参数
domainStore.baseParams={
company_id:Ext.get('company_id').getValue(),
area_code:Ext.get('area_code').getValue()
}
domainStore.load();//加载数据源
以上就完成了动态加载数据的过程，其中要注意的是该数据的加载是异步的。
......
})
ComboBox在页面设计中经常会使用到，一般都是在formPanel中使用，其中ComboBox的fieldLabel属性等都要在layout为form的情况下才会生效，所以如果防止ComboBox的容器layout不是form，则fieldLabel可能就不会显示。例如在toolbar中添加ComboBox，则fieldLabel就不会出现，同时下拉框下拉按钮没有对齐，如图1所示，因此，当ComboBox出现在toolbar中时，fieldLabel不会出现，只能通过定义一个Label控件来显示，下拉按钮的对齐，则可以通过添加css在进行修改，
var tbRight = new Ext.Toolbar({
widht:'100%',
height:25,
cls:'right-tb-class',
......
CSS 代码如下所示：
.right-tb-class .x-form-field-wrap .x-form-trigger{
top:0px; //修改top的值就可以调整下拉框按钮的位置
}
添加完CSS后，效果如图2所示
附图：
图1，没有对齐
图2，添加CSS后效果 | 
转播
