Ext 学习笔记(一)Ext ComboBox

 

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

你可能感兴趣的:(function,css,ext,layout,domain,action)