可以用javascript的數組作為數據源,也可以用json作為數據源:
1.用javascript數組
var CountryCode = [
['93','Afghanistan(93)'],
['355','Albania (355)'],
['213','Algeria (213)'],
['684','American Samoa (684)'],
['376','Andorra (376)'],
['244','Angola (244)'],
.....
]
new Ext.form.ComboBox(...{
fieldLabel: 'Country Code',
name:'country_code',
forceSelection: true,
listWidth: 200,
store: new Ext.data.SimpleStore(...{
fields: ['value', 'text'],
data : CountryCode
}),
valueField:'value',
displayField:'text',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,//用戶不能自己輸入,只能選擇列表中有的記錄
allowBlank:false
})
2:用json作為數據源
var comboOptions = new Ext.data.JsonStore(...{
url:'myurl',
fields: ['id','name']});
comboOptions.load();
new Ext.form.ComboBox(...{
fieldLabel: 'Management Level',
name:'group_id',
forceSelection: true,
listWidth: 150,
store: comboOptions,
valueField:'id',
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
allowBlank:false
})
myurl輸出的json數據格式如下:
[{"id":"1","name":"Super Admin"},{"id":"2","name":"Admin"}]
需要注意的是,如果返回的json數據有多列,需要在new JsonStore的時候,在fields一項中填寫所有column的名字,否則不能填充combobox
- 第一種方式(這種方式,我在使用時,如果數據不是從后台傳過來的就可以,如果是從后台傳過來的就不行了,要使用第二種方式)、
- var CountryCode = [
- ['93','Afghanistan(93)'],
- ['355','Albania (355)'],
- ['213','Algeria (213)'],
- ['684','American Samoa (684)'],
- ['376','Andorra (376)'],
- ['244','Angola (244)']
- ]
- var checkupperson = new Ext.form.ComboBox({
- fieldLabel: '審核人',
- name:'checkupperson',
- forceSelection: true,
- listWidth: 200,
- store: new Ext.data.SimpleStore({
- fields: ['value', 'text'],
- data : CountryCode
- }),
- valueField:'value',
- displayField:'text',
- typeAhead: true,
- mode: 'local',
- triggerAction: 'all',
- selectOnFocus:true,//用戶不能自己輸入,只能選擇列表中有的記錄
- allowBlank:false,
- listeners:{
- select:function(){
- alert(this.value);
- }
- }
- });
- checkupperson.on('beforerender',function(){
- this.value=376;
- });
- 第二種方式:
- var depCombo = new Ext.form.ComboBox({
- fieldLabel:'部門',
- allowBlank: false,
- allowNegative: false,
- triggerAction: 'all',
- displayField :'depName',
- valueField :'depId',
- id:'test',
- store: new Ext.data.JsonStore({
- fields: ['depId','depName'],
- url: '../combobox.do?action=getDepartmentComboBox',
- autoLoad : true,
- listeners :{
- load:function(){
- Ext.getCmp('test').setValue(17);
- }
- } //在此加一個這個玩意,就可以了,呵呵,是在jsonstore中加的,注意
- }),
- editable :false
- });
第一種方式(這種方式,我在使用時,如果數據不是從后台傳過來的就可以,如果是從后台傳過來的就不行了,要使用第二種方式)、 var CountryCode = [ ['93','Afghanistan(93)'], ['355','Albania (355)'], ['213','Algeria (213)'], ['684','American Samoa (684)'], ['376','Andorra (376)'], ['244','Angola (244)'] ] var checkupperson = new Ext.form.ComboBox({ fieldLabel: '審核人', name:'checkupperson', forceSelection: true, listWidth: 200, store: new Ext.data.SimpleStore({ fields: ['value', 'text'], data : CountryCode }), valueField:'value', displayField:'text', typeAhead: true, mode: 'local', triggerAction: 'all', selectOnFocus:true,//用戶不能自己輸入,只能選擇列表中有的記錄 allowBlank:false, listeners:{ select:function(){ alert(this.value); } } }); checkupperson.on('beforerender',function(){ this.value=376; }); 第二種方式: var depCombo = new Ext.form.ComboBox({ fieldLabel:'部門', allowBlank: false, allowNegative: false, triggerAction: 'all', displayField :'depName', valueField :'depId', id:'test', store: new Ext.data.JsonStore({ fields: ['depId','depName'], url: '../combobox.do?action=getDepartmentComboBox', autoLoad : true, listeners :{ load:function(){ Ext.getCmp('test').setValue(17); } } //在此加一個這個玩意,就可以了,呵呵,是在jsonstore中加的,注意 }), editable :false });
- 第三種方式:
第三種方式:
- bachLoad([xnStore,xqStore,jsStore], function(success){
- if (!success) {
- Ext.Msg.alert('提示', '數據加載失敗,請聯系系統管理員!');
- }else{
- xn = '${DQXN}';
- xq = '${DQXQ}';
- Ext.getCmp('cmb_xq').setValue('${DQXQ}');
- xqmc = Ext.getCmp('cmb_xq').getRawValue();
- }