forms - एक्स्टजेएस 4 कॉम्बो बॉक्स मल्टि चयनित चुनें मानों की संख्या




extjs view combobox extjs4 (2)

आप कॉम्बोबॉक्स के लिए एक सरल प्लगइन लिख सकते हैं। फिर इसे आपके आवेदन के किसी भी कन्बोबेक्स को सौंपा जा सकता है।

उदाहरण के लिए:

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);   
            }
        }
    });

});

क्या यह हासिल करने का कोई आसान तरीका है?


हमारे पास चयनित रंग प्रदर्शित करने के लिए समान कार्य है। हमारा समाधान कोंबोबॉक्स टेम्पलेट का ओवरराइड है:

var store = new Ext.data.SimpleStore({
    fields: ['num','id', 'color']
});

var tplColor = new Ext.XTemplate(
    '<tpl for="."><div id = "seriesColor_{num}" class="combo-result-item">',
       '<div  class="combo-texture" style="background-color:{color};">&nbsp;</div>',
    '</div></tpl>'
 );

new Ext.form.ComboBox({
    tpl: tplColor,
    store: store,
    ...
};

आप कुछ इसी तरह कर सकते हैं लेकिन पृष्ठभूमि रंग के बजाय छवि का उपयोग कर सकते हैं।





forms extjs view combobox extjs4