javascript - कैसे ग्रिड में प्रत्येक सेल कन्बोब्क्स संपादक के लिए अलग-अलग स्टोरों को परिभाषित करता है?




extjs combobox (2)

मुझे एक ग्रिड को कार्यान्वित करने की आवश्यकता है, जो कि extad 4.2.1 का उपयोग कर रहा है। इस ग्रिड में सेलएडिटिग प्लगइन होगा और कॉलम में मेरे पास कई टेक्स्टफ़ील्ड और कंबोडेक्स होंगे।

मेरी समस्या एक विशेष मामले के लिए है मेरे पास देशों के लिए एक स्तंभ है (उदाहरण के लिए)। कॉलम एडिटर देशों के साथ स्टोर के साथ कंबोडिया होगा। अगला कोंबबोक्स एक ही पंक्ति इंडेक्स पर चयनित देश के शहरों होंगे। जब मैं उस स्टोर को परिभाषित करता हूं, तो यह कॉलम उसी स्टोर के साथ रहेगा और मुझे यह पता नहीं है।

पंक्ति में 0, मैं यूएसए का चयन करता हूं और मुझे अगले कॉम्बो में अमेरिकी शहरों को लोड करना होगा 1 पंक्ति में, मैं यूके देश का चयन करता हूं और मुझे ब्रिटेन के शहरों को लोड करना पड़ता है, लेकिन यदि 0 पर वापस जाना और अमेरिकी शहरों का चयन करना है तो मैं यू.एस. शहर देखना चाहता हूं और यूके के शहर नहीं देखना चाहता।

मैं प्रत्येक कॉम्बो सेल के लिए अलग-अलग स्टोर कैसे परिभाषित करूं?


आपको अपनी दुकान को एक बार पसंद करना चाहिए


Ext.define('MyApp.city.Store',{
   extend:'Ext.data.Store',
   //all properties which you need
});

और आपको इसका उदाहरण शहर के सेल जैसे के लिए बनाना चाहिए


cityStore = Ext.create('MyApp.city.Store');


आपको Ext.grid.plugin.CellEditing सेल संपादन को सक्षम करने वाले Ext.grid.plugin.CellEditing प्लगइन के साथ सेटअप ग्रिड की आवश्यकता है। शहर के स्तंभ संपादक के रूप में आप Ext.form.field.ComboBox उपयोग Ext.form.field.ComboBox । जब उपयोगकर्ता शहर के कॉलम में सेल पर संपादन मोड में प्रवेश करते हैं, तो आप संपादक कंबोडिया के स्टोर को फ़िल्टर करते हैं। चयनित देश के बारे में जानकारी जिसे आपको शहर के कॉम्बोबोक्स फ़िल्टर करने की आवश्यकता है, आपको पंक्ति रिकॉर्ड संपादन से मिलता है।

  1. सबसे पहले आप को Ext.form.field.ComboBox उदाहरण के साथ शहर का स्तंभ संपादक सेटअप करना होगा जो संपादन के लिए उपयोग किया जाएगा:

    var comboCities = Ext.create('Ext.form.field.ComboBox', {
        store: storeCities,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'name'
    });

    और ग्रिड कॉलम परिभाषा में:

    columns: [
       ...
       {
           header: 'City', 
           dataIndex: 'city', 
           editor: comboCities,                                        
        },
        ...
    ]
  2. दूसरे को आपको अपने Ext.grid.plugin.CellEditing प्लगइन कॉन्फ़िगरेशन श्रोता के रूप में beforeedit ईवेंट में beforeedit । इस श्रोता में आप यह निर्धारित कर सकते हैं कि कौन से कॉलम प्रारंभ करना प्रारंभ करना है। अगर संपादन कॉलम शहर का स्तंभ है, तो आप चुने गए देश के बारे में पंक्ति रिकॉर्ड जानकारी को संपादित करने और comboCities स्टोर को फ़िल्टर कर comboCities हैं। इसलिए फ़िल्टर किए गए स्टोर में चयनित देश के लिए केवल शहर होंगे।

    उदाहरण के लिए ग्रिड विन्यास में प्लगइन कॉन्फ़िगरेशन होना चाहिए:

    {
        ...
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1,
                listeners: {
                    beforeedit: function(editor, e) {
                        // detrmine which column start editing
                        if (e.colIdx == 2) {
                            // get information about selected country from editin row record
                            var selectedCountry = e.record.get('country');
    
                            // filter store with cities
                            storeCities.clearFilter();
                            storeCities.filter('country', selectedCountry);
                        }
                    }
                }
            })
        ],
        ...
    }

विन्यास उदाहरण के साथ लाइव बेला को देखें : https://fiddle.sencha.com/#fiddle/2bj