Extjs 4 帶checkbox框的下拉多選選框

   Extjs 有着豐富的組件,但是在API裏面卻沒有直接寫好的checkbox下拉框組件,這個時候對於新手來說可能有點蒙了,但是在好好看看Extjs的API後我們不難發現,我們可以通過自己設計拼裝出checkbox下拉框主鍵(所有組件都一樣的,都是在基本組件的基礎上拼裝而成的)。

   我們通過兩個組件得到我們想要的checkbox下拉框:

   1. Ext.form.field.ComboBox 下拉框組件

   2. Ext.XTemplate 模板組件

   其實,在combo組件的配置項中我們就可以看到,combo是支持使用XTemplate的,所以下拉框我們就可以用combo而checkbox則用XTemplate自己寫就可以了。

{
   xtype: 'combo',
   name: 'status',
   id: 'statusId',
   multiSelect: true,
   editable: false,
   emptyText: justsyLang.strategyExecutionStatus, //'策略執行狀態',
   queryMode: 'local',
   store: status,
   valueField: 'id',
   displayField: 'name',
   listConfig: {
       itemTpl: '<tpl for="."><div class="x-combo-list-item"><span>  {name}</span></div></tpl>',
   },
   queryMode: 'local',
   triggerAction: 'all',
},


   備註:multiSelect 默認爲false表示單選,如果需要支出多選則設置爲true。

   從上面我們就可以得到一個簡單的checkbox了,但是這樣的checkbox是不完美的,在做選擇的時候點擊checkbox框和點擊下拉內容都表示選擇了該項,但是隻有點擊checkbox的時候checkbox才表現出選中的效果,所以我們需要給他添加一些方法,保證checkbox的打鉤和沒打鉤表現出選中和未選中的統一性;


//在listConfig中添加下面的方法
 onItemSelect: function(record) {     
               var node = this.getNode(record); 
               if (node) { 
                  Ext.fly(node).addCls(this.selectedItemCls); 
                                                                                                                                  
                  var checkboxs = node.getElementsByTagName("input"); 
                  if(checkboxs!=null){ 
                      var checkbox = checkboxs[0]; 
                      checkbox.checked = true; 
                  } 
               }

 

    這樣總有讓一個簡單的checkbox成型了。

    可能在項目中,我們對checkbox下拉框的需求量較大,這樣的話,我們就可以直接把checkbox下拉框做出一個自己封裝的組件的形式存在,這樣就不需要重複的寫了,每次需要的時候只用通過xtype調用就可以了。

   ps:下面直接寫成組件形式的代碼引用自網絡,自己就一個地方用到也就沒刻意的去寫了

Ext.define('MDM.view.custom.MultiComboBox', { 
    extend: 'Ext.form.ComboBox', 
    alias: 'widget.multicombobox', 
    xtype: 'multicombobox', 
    initComponent: function(){ 
        this.multiSelect = true; 
        this.listConfig = { 
              itemTpl : Ext.create('Ext.XTemplate', 
                    '<input type=checkbox>{value}'), 
              onItemSelect: function(record) {     
                  var node = this.getNode(record); 
                  if (node) { 
                     Ext.fly(node).addCls(this.selectedItemCls); 
                                                                          
                     var checkboxs = node.getElementsByTagName("input"); 
                     if(checkboxs!=null) 
                     { 
                         var checkbox = checkboxs[0]; 
                         checkbox.checked = true; 
                     } 
                  } 
              }, 
              listeners:{ 
                  itemclick:function(view, record, item, index, e, eOpts ){ 
                      var isSelected = view.isSelected(item); 
                      var checkboxs = item.getElementsByTagName("input"); 
                      if(checkboxs!=null) 
                      { 
                          var checkbox = checkboxs[0]; 
                          if(!isSelected) 
                          { 
                              checkbox.checked = true; 
                          }else{ 
                              checkbox.checked = false; 
                          } 
                      } 
                  } 
              }        
        }        
        this.callParent(); 
    } 
});


   Extjs版本:Extjs 4.2.1


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章