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后效果