ExtJS 4 ComboBox multiSelect顯示選定值的數量

Question

我在寫POC，我的客戶希望顯示多選組合框下面的選定值的數量。

我可以從select事件偵聽器中獲取值的數量，但想要在組件本身封裝功能，而不是讓我執行DOM更新。

的代碼爲多選組合框如下：

Ext.onReady(function() { 
    // The data store containing the list of states 
    var states = Ext.create('Ext.data.Store', { 
     fields: ['abbr', 'name'], 
     data: [{ 
      name: 'ALABAMA', 
      abbreviation: 'AL' 
     }, { 
      name: 'ALASKA', 
      abbreviation: 'AK' 
     }, { 
      name: 'AMERICAN SAMOA', 
      abbreviation: 'AS' 
     }, { 
      name: 'ARIZONA', 
      abbreviation: 'AZ' 
     }, { 
      name: 'ARKANSAS', 
      abbreviation: 'AR' 
     }, { 
      name: 'CALIFORNIA', 
      abbreviation: 'CA' 
     }, { 
      name: 'COLORADO', 
      abbreviation: 'CO' 
     }, { 
      name: 'CONNECTICUT', 
      abbreviation: 'CT' 
     }, { 
      name: 'DELAWARE', 
      abbreviation: 'DE' 
     }, { 
      name: 'DISTRICT OF COLUMBIA', 
      abbreviation: 'DC' 
     }, { 
      name: 'FEDERATED STATES OF MICRONESIA', 
      abbreviation: 'FM' 
     }, { 
      name: 'FLORIDA', 
      abbreviation: 'FL' 
     }, { 
      name: 'GEORGIA', 
      abbreviation: 'GA' 
     }, { 
      name: 'GUAM', 
      abbreviation: 'GU' 
     }, { 
      name: 'HAWAII', 
      abbreviation: 'HI' 
     }, { 
      name: 'IDAHO', 
      abbreviation: 'ID' 
     }, { 
      name: 'ILLINOIS', 
      abbreviation: 'IL' 
     }, { 
      name: 'INDIANA', 
      abbreviation: 'IN' 
     }, { 
      name: 'IOWA', 
      abbreviation: 'IA' 
     }, { 
      name: 'KANSAS', 
      abbreviation: 'KS' 
     }, { 
      name: 'KENTUCKY', 
      abbreviation: 'KY' 
     }, { 
      name: 'LOUISIANA', 
      abbreviation: 'LA' 
     }, { 
      name: 'MAINE', 
      abbreviation: 'ME' 
     }, { 
      name: 'MARSHALL ISLANDS', 
      abbreviation: 'MH' 
     }, { 
      name: 'MARYLAND', 
      abbreviation: 'MD' 
     }, { 
      name: 'MASSACHUSETTS', 
      abbreviation: 'MA' 
     }, { 
      name: 'MICHIGAN', 
      abbreviation: 'MI' 
     }, { 
      name: 'MINNESOTA', 
      abbreviation: 'MN' 
     }, { 
      name: 'MISSISSIPPI', 
      abbreviation: 'MS' 
     }, { 
      name: 'MISSOURI', 
      abbreviation: 'MO' 
     }, { 
      name: 'MONTANA', 
      abbreviation: 'MT' 
     }, { 
      name: 'NEBRASKA', 
      abbreviation: 'NE' 
     }, { 
      name: 'NEVADA', 
      abbreviation: 'NV' 
     }, { 
      name: 'NEW HAMPSHIRE', 
      abbreviation: 'NH' 
     }, { 
      name: 'NEW JERSEY', 
      abbreviation: 'NJ' 
     }, { 
      name: 'NEW MEXICO', 
      abbreviation: 'NM' 
     }, { 
      name: 'NEW YORK', 
      abbreviation: 'NY' 
     }, { 
      name: 'NORTH CAROLINA', 
      abbreviation: 'NC' 
     }, { 
      name: 'NORTH DAKOTA', 
      abbreviation: 'ND' 
     }, { 
      name: 'NORTHERN MARIANA ISLANDS', 
      abbreviation: 'MP' 
     }, { 
      name: 'OHIO', 
      abbreviation: 'OH' 
     }, { 
      name: 'OKLAHOMA', 
      abbreviation: 'OK' 
     }, { 
      name: 'OREGON', 
      abbreviation: 'OR' 
     }, { 
      name: 'PALAU', 
      abbreviation: 'PW' 
     }, { 
      name: 'PENNSYLVANIA', 
      abbreviation: 'PA' 
     }, { 
      name: 'PUERTO RICO', 
      abbreviation: 'PR' 
     }, { 
      name: 'RHODE ISLAND', 
      abbreviation: 'RI' 
     }, { 
      name: 'SOUTH CAROLINA', 
      abbreviation: 'SC' 
     }, { 
      name: 'SOUTH DAKOTA', 
      abbreviation: 'SD' 
     }, { 
      name: 'TENNESSEE', 
      abbreviation: 'TN' 
     }, { 
      name: 'TEXAS', 
      abbreviation: 'TX' 
     }, { 
      name: 'UTAH', 
      abbreviation: 'UT' 
     }, { 
      name: 'VERMONT', 
      abbreviation: 'VT' 
     }, { 
      name: 'VIRGIN ISLANDS', 
      abbreviation: 'VI' 
     }, { 
      name: 'VIRGINIA', 
      abbreviation: 'VA' 
     }, { 
      name: 'WASHINGTON', 
      abbreviation: 'WA' 
     }, { 
      name: 'WEST VIRGINIA', 
      abbreviation: 'WV' 
     }, { 
      name: 'WISCONSIN', 
      abbreviation: 'WI' 
     }, { 
      name: 'WYOMING', 
      abbreviation: 'WY' 
     }] 
    }); 

    // Create the combo box, attached to the states data store 
    Ext.create('Ext.form.ComboBox', { 
     labelAlign: 'top', 
     labelPad: 10, 
     fieldLabel: 'Choose State', 
     store: states, 
     queryMode: 'local', 
     editable: false, 
     displayField: 'name', 
     valueField: 'abbreviation', 
     renderTo: Ext.getBody(), 
     multiSelect: true, 
     width: 400, 
     displayTpl: '<tpl for=".">' + 
      '{name}' + 
      '<tpl if="xindex < xcount">, </tpl>' + 
      '</tpl>', 
     listConfig: { 
      itemTpl: '{name} <div class="chkbox"></div>' 
     }, 
     listeners: { 
      select: function (combo, records) { 
       console.log(records.length); 
      } 
     } 
    }); 

}); 

有沒有簡單的方法來實現這一目標？

Answer 1

您可以爲ComboBox編寫一個簡單的插件。然後它可以分配給你的應用程序的任何組合框。

例如：

Ext.define('comboSelectedCount', { 
    alias: 'plugin.selectedCount', 
    init: function(combo) { 
     var fl = combo.getFieldLabel(); 
     combo.on({ 
      'select': function(me, records) { 
       me.setFieldLabel(fl + ' (' + records.length + ' selected)'); 
      }, 
      'beforedeselect': function(me) { 
       me.setFieldLabel(fl); 
      } 
     }); 
    } 
}); 

而且在你的組合：

plugins: ['selectedCount'], 

查看jsfiddle