快捷導(dǎo)航

Extjs讓combobox寫起來簡潔又漂亮

更新時間：2017年01月05日 10:13:54 作者：魚草野

代碼看起來簡潔又漂亮是如何做到的，這篇文章主要為大家詳細(xì)介紹了Extjs如何讓combobox寫起來更簡單，具有一定的參考價值，感興趣的小伙伴們可以參考一下

也已經(jīng)寫了很久時間的extjs ，每次都用到很多的combobox，配置很多東西覺得實(shí)在是太麻煩，所以根據(jù)常用到的情況寫了一個簡便的combobox，再次記錄下來，以免放在某個地方忘記了找不到了。

定義一個基本的baseCombobox類，如下。

Ext.define('Admin.view.baseCmp.BaseCombobox', {
 extend: 'Ext.form.field.ComboBox',
 xtype: 'baseCombobox',
 editable: false,
 labelSeparator: ':',
 labelWdith: 0,
 triggerAction: 'all',
 labelAlign: 'right',
 //forceSelection: true,此屬性操作時，就算去掉文字后，失去焦點(diǎn)后還是會選擇上一次選擇的記錄
 autoSelect: true,
 selectOnfocus: true,
 valueNotFoundText: '',
 name:'',
 queryMode: 'local',
 url:'',
 displayField: '',
 valueField: '',
 requires:['Admin.view.baseCmp.BaseComboboxController'],
 controller: 'baseComboboxController',
 emptyIndex:-1,//自定義屬性,空值所在下標(biāo)，-1則不添加
 selectIndex:0,//自定義屬性，自動選擇下標(biāo)
 params:null,//自定義屬性，數(shù)據(jù)參數(shù)
 listeners: {
  render: 'getComboData',
  scope: 'controller'
 },
});

Ext.define('Admin.view.baseCmp.BaseComboboxController', {
 extend: 'Ext.app.ViewController',
 alias: 'controller.baseComboboxController',
 getComboData: function (combo) {
  Ext.Ajax.request({
   url: combo.url,
   method :'POST',
   params:combo.params,
   success: function (response) {
    var dataJson = Ext.decode(response.responseText);
    if(dataJson.state != 200 || dataJson.data == null || dataJson.data.length == 0)
    {
     //服務(wù)器返回錯誤
     return ;
    }
    var data = dataJson.data;
    //插入“全部”選項(xiàng)
    if(combo.emptyIndex >= 0)
    {
     var emp = {};
     emp[combo.displayField] = "全部";
     emp[combo.valueField] = "全部";
     Ext.Array.insert(data,combo.emptyIndex,[emp]);
    }
    var store = Ext.create('Ext.data.Store', {
     fields: Ext.Object.getKeys(data[0]),
     data: data
    });

    combo.setStore(store);
    //如果指定選中某個值
    if(combo.selectValue != null)
    {
     combo.select(combo.selectValue);
    }
    else
    {
     //如果指定選中某個下標(biāo)的值，-1為最后一個，> 0 則為第selectIndex個
     if(combo.selectIndex == -1)
     {
      console.log(data.length - 1);
      combo.select(data[data.length - 1][combo.valueField]);
     }
     else
     {
      combo.select(data[combo.selectIndex][combo.valueField]);
     }

    }

    //觸發(fā)選中事件
    //combo.fireEvent('select', combo,store.getAt(combo.selectIndex));
   },
   failure: function (response) {
    //請求服務(wù)器失敗
   }
  });

 }
});

調(diào)用實(shí)例：

{
    xtype: 'baseCombobox',
    name: "typeName",
    fieldLabel: "類型",
    displayField: 'typeName',
    valueField: 'id',
    emptyIndex:0,
    multiSelect:false,
    url:"/itemType/list",
    listeners:{
     select:'query'
    }
},

這樣大大方便了我使用combobox，如果某種類型的combobox需要重復(fù)使用，建議還是直接定義好他，到需要用的時候一句：

xtype: 'itemTypeCombobox',就可以搞定了，代碼看起來簡潔又漂亮。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: