extjs的combobox的用法

時間 2019-11-12

標籤 extjs combobox 用法简体版

原文原文鏈接

能夠用javascript的數組做爲數據源,也能夠用json做爲數據源:javascript

1.用javascript數組java

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
})json

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
})
this

myurl輸出的json數據格式以下:url

[{"id":"1","name":"Super Admin"},{"id":"2","name":"Admin"}]spa

須要注意的是,若是返回的json數據有多列,須要在new JsonStore的時候,在fields一項中填寫全部column的名字,不然不能填充combobox.net

第一種方式（這種方式，我在使用時，若是數據不是從後臺傳過來的就能夠，若是是從後臺傳過來的就不行了，要使用第二種方式）、
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
        });

[javascript] view plain copy print ?