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);
}
}
});
});
有没有简单的方法来实现这一目标?
这是伟大的,一个非常巧妙的解决办法活生生的例子。谢谢! – RyanP13 2013-02-14 06:31:52
当您选择一个项目然后取消选择它时,会出现奇怪的行为。所选项目的数量仍为1,而不是0。 – RyanP13 2013-02-14 06:57:08
@ RyanP13是的,这是由于在选择至少一个元素时触发事件,而不是在取消选择时触发事件。需要添加另一种方法 - '取消选择'之前。查看更新的示例:http://jsfiddle.net/hURY8/1/ – Vlad 2013-02-14 07:15:04