extjs的combobox的用法


可以用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

 

 

 

 

  1. 第一種方式(這種方式,我在使用時,如果數據不是從后台傳過來的就可以,如果是從后台傳過來的就不行了,要使用第二種方式)、 
  2. var CountryCode = [ 
  3.     ['93','Afghanistan(93)'], 
  4.     ['355','Albania (355)'], 
  5.     ['213','Algeria (213)'], 
  6.     ['684','American Samoa (684)'], 
  7.     ['376','Andorra (376)'], 
  8.     ['244','Angola (244)'
  9. var checkupperson = new Ext.form.ComboBox({ 
  10.             fieldLabel: '審核人'
  11.             name:'checkupperson'
  12.             forceSelection: true
  13.             listWidth: 200, 
  14.             store: new Ext.data.SimpleStore({ 
  15.                 fields: ['value', 'text'], 
  16.                 data : CountryCode 
  17.                 }), 
  18.             valueField:'value'
  19.             displayField:'text'
  20.             typeAhead: true
  21.             mode: 'local'
  22.             triggerAction: 'all'
  23.             selectOnFocus:true,//用戶不能自己輸入,只能選擇列表中有的記錄  
  24.             allowBlank:false
  25.             listeners:{ 
  26.              select:function(){ 
  27.               alert(this.value); 
  28.              } 
  29.             } 
  30.         }); 
  31.   checkupperson.on('beforerender',function(){ 
  32.         this.value=376; 
  33.   }); 
  34. 第二種方式: 
  35.   var depCombo = new Ext.form.ComboBox({ 
  36.      fieldLabel:'部門'
  37.               allowBlank: false
  38.      allowNegative: false
  39.      triggerAction: 'all'
  40.      displayField :'depName'
  41.      valueField :'depId'
  42.      id:'test'
  43.              store: new Ext.data.JsonStore({ 
  44.       fields: ['depId','depName'], 
  45.       url: '../combobox.do?action=getDepartmentComboBox'
  46.       autoLoad : true
  47.       listeners :{ 
  48.         load:function(){ 
  49.         Ext.getCmp('test').setValue(17); 
  50.         } 
  51.        } //在此加一個這個玩意,就可以了,呵呵,是在jsonstore中加的,注意  
  52.       }), 
  53.        
  54.              editable :false 
  55.         }); 
第一種方式(這種方式,我在使用時,如果數據不是從后台傳過來的就可以,如果是從后台傳過來的就不行了,要使用第二種方式)、
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 ?
  1.   
 
[javascript] view plain copy print ?
  1.   
 
[javascript] view plain copy print ?
  1. 第三種方式: 
第三種方式:
[javascript] view plain copy print ?
  1. bachLoad([xnStore,xqStore,jsStore], function(success){ 
  2.              if (!success) { 
  3.                  Ext.Msg.alert('提示', '數據加載失敗,請聯系系統管理員!'); 
  4.              }else
  5.               xn = '${DQXN}'
  6.               xq = '${DQXQ}'
  7.               Ext.getCmp('cmb_xq').setValue('${DQXQ}'); 
  8.               xqmc = Ext.getCmp('cmb_xq').getRawValue(); 
  9.              } 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM