Extjs 4 checkboxボックス付きのプルダウン多選ボックス

Extjsは豊富なコンポーネントを持っていますが、APIの中で直接に作成したcheckboxのドロップダウンフレームのコンポーネントがありません.この時は初心者にはちょっと蒙古かもしれませんが、ExtjsのAPIをよく見てから、私達は自分でデザインしてチェッカーボックスのキーを引くことができます..
   私たちは二つのコンポーネントを通して、私たちが欲しいチェッカーボックスのドロップダウンフレームを入手します.
   1.Ext.form.field..compboxコンボボックスのコンポーネント
   2.Ext.XTemplateテンプレートコンポーネント
   実際には、compboコンポーネントの配置項目では、complateはXTemplateを使用することをサポートしていますので、コンボボックスはcompboで、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は完璧ではありません.選択をする時にチェックボックスをクリックしたり、ドロップダウンをクリックしたりして、この項目を選択したという意味です.しかし、chekboxをクリックした時にのみ選択の効果が現れます.だから、彼にいくつかの方法を追加してください.チェックボックスのフックとチェックしていないフックは選択と未選択の統一性を表します.

// 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を成型させました.
    プロジェクトの中で、私達はチェックボックスのドロップダウンの需要量が大きいかもしれません.そうすると、私達は直接にチェックボックスを下にして自分のパッケージを作ることができます.このように繰り返し書く必要はありません.必要な時は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