2013-02-14 96 views
3

我在写POC,我的客户希望显示多选组合框下面的选定值的数量。ExtJS 4 ComboBox multiSelect显示选定值的数量

我可以从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); 
      } 
     } 
    }); 

}); 

有没有简单的方法来实现这一目标?

回答

8

您可以为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

+0

这是伟大的,一个非常巧妙的解决办法活生生的例子。谢谢! – RyanP13 2013-02-14 06:31:52

+0

当您选择一个项目然后取消选择它时,会出现奇怪的行为。所选项目的数量仍为1,而不是0。 – RyanP13 2013-02-14 06:57:08

+2

@ RyanP13是的,这是由于在选择至少一个元素时触发事件,而不是在取消选择时触发事件。需要添加另一种方法 - '取消选择'之前。查看更新的示例:http://jsfiddle.net/hURY8/1/ – Vlad 2013-02-14 07:15:04