extjs的combobox的用法

extjs的combobox的用法

Posted on 2013-08-05 21:55 奥客 阅读(6928) 评论(0) 编辑 收藏

可以用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. ] 
  10. var checkupperson = new Ext.form.ComboBox({ 
  11.             fieldLabel: '审核人', 
  12.             name:'checkupperson', 
  13.             forceSelection: true, 
  14.             listWidth: 200, 
  15.             store: new Ext.data.SimpleStore({ 
  16.                 fields: ['value', 'text'], 
  17.                 data : CountryCode 
  18.                 }), 
  19.             valueField:'value', 
  20.             displayField:'text', 
  21.             typeAhead: true, 
  22.             mode: 'local', 
  23.             triggerAction: 'all', 
  24.             selectOnFocus:true,//用户不能自己输入,只能选择列表中有的记录  
  25.             allowBlank:false, 
  26.             listeners:{ 
  27.              select:function(){ 
  28.               alert(this.value); 
  29.              } 
  30.             } 
  31.         }); 
  32.   checkupperson.on('beforerender',function(){ 
  33.         this.value=376; 
  34.   }); 
  35. 第二种方式: 
  36.   var depCombo = new Ext.form.ComboBox({ 
  37.      fieldLabel:'部门', 
  38.               allowBlank: false, 
  39.      allowNegative: false, 
  40.      triggerAction: 'all', 
  41.      displayField :'depName', 
  42.      valueField :'depId', 
  43.      id:'test', 
  44.              store: new Ext.data.JsonStore({ 
  45.       fields: ['depId','depName'], 
  46.       url: '../combobox.do?action=getDepartmentComboBox', 
  47.       autoLoad : true, 
  48.       listeners :{ 
  49.         load:function(){ 
  50.         Ext.getCmp('test').setValue(17); 
  51.         } 
  52.        } //在此加一个这个玩意，就可以了，呵呵，是在jsonstore中加的，注意  
  53.       }), 
  54.        
  55.              editable :false 
  56.         }); 
第一种方式（这种方式，我在使用时，如果数据不是从后台传过来的就可以，如果是从后台传过来的就不行了，要使用第二种方式）、
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
        });
  1.   
  1.   
  1. 第三种方式： 
第三种方式：
  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.              } 
posted @ 2017-08-14 23:15  吃饭了吗  阅读(230)  评论(0)  编辑  收藏  举报