forms - एक्स्टजेएस 4 कॉम्बो बॉक्स मल्टि चयनित चुनें मानों की संख्या
extjs view (1)
आप कॉम्बोबॉक्स के लिए एक सरल प्लगइन लिख सकते हैं। फिर इसे आपके आवेदन के किसी भी कन्बोबेक्स को सौंपा जा सकता है।
उदाहरण के लिए:
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 पर लाइव उदाहरण देखें
मैं एक पीओसी लिख रहा हूं और मेरा ग्राहक बहु-चयन कॉम्बो बॉक्स के नीचे चयनित मानों की संख्या को प्रदर्शित करना चाहता है।
मैं चुनिंदा घटना श्रोता से मूल्यों की संख्या प्राप्त कर सकता हूँ, लेकिन डीआईवी की जगह डीआईएपी के प्रदर्शन के बजाए घटक में कार्यक्षमता को आवृत करना चाहता था।
बहु-चयन कॉम्बो बॉक्स का कोड निम्नानुसार है:
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);
}
}
});
});
क्या यह हासिल करने का कोई आसान तरीका है?