Ext 学习笔记（一）Ext ComboBox

最新推荐文章于 2018-06-01 10:14:26 发布

yyhm

最新推荐文章于 2018-06-01 10:14:26 发布

阅读量7.7k

点赞数

文章标签： ext domain layout css action function

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所示

附图：