javascript - ExtJS के साथ एक डायनामिक ग्रिड बनाना




extjs4 gridpanel (2)

मैं एक डायनामिक ग्रिड क्लास बनाने की कोशिश कर रहा हूं (जहां मुझे कॉलम के बारे में कोई जानकारी नहीं है, लेकिन ये जेएसन प्रतिक्रिया से दिए गए हैं और गर्ड खुद को तदनुसार तैयार करता है)। यहां मुझे मिल गया है कि वास्तव में मैं जो देख रहा था लेकिन मुझे एक त्रुटि देता है:

me.model is undefined
me.setProxy(me.proxy || me.model.getProxy());
ext-all-debug.js (line 47323)

मैंने प्रॉक्सी और मॉडल दोनों को जोड़ने का प्रयास किया है, लेकिन मैं सफल नहीं था, मुझे एक ही त्रुटि मिलती रही।

यहां ExtJS कोड है जिस पर मैं काम कर रहा हूं:

 // ExtJS 4.1
 Ext.Loader.setConfig({
     enabled: true
 });
 Ext.Loader.setPath('Ext.ux', '../extjs-4.1.0/examples/ux');
 Ext.require([
     'Ext.grid.*',
     'Ext.data.*', ]);


 Ext.define('DynamicGrid', {
     extend: 'Ext.grid.GridPanel',
     storeUrl: '',
     enableColumnHide: true,
     initComponent: function () {
         var store = new Ext.data.Store({
             url: this.storeUrl,
             reader: new Ext.data.JsonReader(),
             autoLoad: true,
             scope: this,
             listeners: {
                 scope: this,
                 metachange: function (store, meta) {
                     if (typeof (store.reader.jsonData.columns) === 'object') {
                         var columns = [];
                         /**
                          * Adding RowNumberer or setting selection model as CheckboxSelectionModel
                          * We need to add them before other columns to display first
                          */
                         if (this.rowNumberer) {
                             columns.push(new Ext.grid.RowNumberer());
                         }
                         if (this.checkboxSelModel) {
                             columns.push(new Ext.grid.CheckboxSelectionModel());
                         }
                         Ext.each(store.reader.jsonData.columns, function (column) {
                             columns.push(column);
                         }); // Set column model configuration 
                         this.getColumnModel().setConfig(columns);
                         this.reconfigure(store, this.getColumnModel());
                     }
                 }
             }
         });
         var config = {
             title: 'Dynamic Columns',
             viewConfig: {
                 emptyText: 'No rows to display'
             },
             loadMask: true,
             border: false,
             stripeRows: true,
             store: store,
             columns: []
         }
         Ext.apply(this, config);
         Ext.apply(this.initialConfig, config);
         DynamicGrid.superclass.initComponent.apply(this, arguments);
     },
     onRender: function (ct, position) {
         this.colModel.defaultSortable = true;
         DynamicGrid.superclass.onRender.call(this, ct, position);
     }
 });

 Ext.onReady(function () {

     Ext.QuickTips.init();

     var grid = Ext.create('DynamicGrid', {
         storeUrl: 'http://300.79.103.188/ApplicationJs/jsontest.json'
     });

     var depV = Ext.create('Ext.Viewport', {
         title: 'Departman Tanımları',
         layout: 'fit',
         items: grid
     }).show();

 });

इसे चलाने के लिए मुझे क्या करना है?


यह एक बहुत पुरानी पोस्ट है, इसलिए जल्द ही आपके पास अधिक कामकाज हो सकते हैं, लेकिन यह त्रुटि इसलिए है क्योंकि आपके पास कोई मॉडल कॉन्फ़िग नहीं है या आपके स्टोर के लिए निर्धारित फ़ील्ड कॉन्फ़िग नहीं है। मॉडल को भी गतिशील रूप से परिभाषित करने की आवश्यकता होगी यदि आप चाहते हैं कि आपके ग्रिड को जेएसएन डेटा अकेले बनाया गया हो।

जहाँ तक मुझे पता है, फ़ील्ड कॉन्फ़िग बहुत क्षमा करने योग्य है, इसलिए आप इसे 20 या 30 या इतने बड़े फ़ील्ड के साथ सेट कर सकते हैं, लेकिन फ़ील्ड के नामों के लिए जेएसन फ़ील्ड नाम से मेल करना होगा यह प्रयोग करने योग्य हो Ie यदि आप उपयोग करते हैं:

var store = new Ext.data.Store({
    url: this.storeUrl,
    reader: new Ext.data.JsonReader(),
    fields: [
        'column1',
        'column2',
        'column3',
        'column4',
        'column5',
        // etc
    ],

तब आपके जेएसएन डेटा को डेटाबेस से आने की आवश्यकता होगी जैसे:

[{"column1":"data1", "column2":"data2", // etc

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

आप ऐसा कुछ कर सकते हैं कि यदि आप अपने डेटाबेस को जेनेरिक कॉलम के नामों को ऊपर कवर के रूप में वापस नहीं करना चाहते हैं, क्योंकि मुझे नहीं पता कि यह डेटा आपके ग्रिड स्टोर में डेटा लोड करने से पहले लोड हो जाएगा उपयोग।

13 जून अपडेट:

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

मेटाडाटा को संसाधित करने के बाद आपको संभवतः अभी भी इसके बाद के संस्करण को वर्णित करना होगा, लेकिन आप मेटा डेटा प्राप्त करने के लिए अतिरिक्त अनुरोध को काटने के लिए इसका उपयोग कर सकते हैं।

मुझे लगता है कि यदि आपका क्षेत्र कॉन्फ़िगरेशन हर अनुरोध के साथ नहीं बदलेगा तो शुरुआत में अतिरिक्त अनुरोध करने के लिए बस इतना आसान होगा, लेकिन अगर आप वाकई गतिशील कुछ करना चाहते हैं तो यह ऐसा करेगा।


नोट : यह मेरी प्रतिक्रिया का एक डुप्लिकेट है: आप जेएसएन से तालिका स्तंभ और फ़ील्ड कैसे बनाते हैं? (डायनेमिक ग्रिड) मैं सिर्फ इस समस्या को सुलझाने के लिए स्टैक ओव्हरफ्लो प्रश्नों में अपने अंतिम समाधान को हल करना चाहता था

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

मॉडल: (केवल 2 फ़ील्ड दिखाए जाएंगे जो सभी जेएसओएन प्रतिक्रियाओं में होंगे। फिर भी ओवरराइट किया जाएगा)

Ext.define('RTS.model.TestsModel', {
    extend: 'Ext.data.Model',
    alias: 'model.TestsModel',

    fields: [
        {
            name: 'poll_date'
        },
        {
            name: 'poller'
        }
    ]
});

दुकान:

Ext.define('RTS.store.TestsStore', {
    extend: 'Ext.data.Store',
    alias: 'store.TestsStore',

    model: 'RTS.model.TestsModel',

    constructor: function(cfg) {
        var me = this;

        cfg = cfg || {};

        me.callParent([Ext.apply({
            autoLoad: false,
            proxy       : {
                type    : 'ajax',
                url     : 'tests.php',
                reader  : {
                    type    : 'json',
                    root    : 'tests',
                    successProperty : 'success'
                }
            },            
            storeId: 'tests-store'
        }, cfg)]);
    }
});

देखें: (कॉलम प्रत्येक JSON प्रतिक्रिया में परिभाषित किया जाएगा)

Ext.define('RTS.view.TestsView', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.TestsView',

    id: 'tests-view',
    title: 'Tests',
    emptyText: '',
    store: 'TestsStore',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            viewConfig: {

            },
            columns: [
            ]
        });

        me.callParent(arguments);
    }

});

नियंत्रक: (नियंत्रक, JSON प्रतिक्रिया के आधार पर बदलने के लिए दृश्य और मॉडल को मजबूर करने में सभी काम करता है)

Ext.define('RTS.controller.TestsController', {
    extend: 'Ext.app.Controller',
    alias: 'controller.TestsController',

    stores: [
        'TestsStore'
    ],
    models: [
        'TestsModel'
    ],
    views: [
        'TestsView'
    ],

    init: function(application) {

        // When store changes, trigger an event on grid
        // to be handled in 'this.control'.  

        // NOTE : Ext JS does not allow control of 
        // non-component events.

        // Ext JS 4.2 beta will allow the controller
        // to detect non-component changes and handle them
        var testsStore = this.getStore('TestsStore');
        testsStore.on("metachange", metaChanged, this);
        function metaChanged(store, meta) {
            var grid = Ext.ComponentQuery.query('TestsView')[0];
            grid.fireEvent('metaChanged', store, meta);
        };


        this.control({
            "TestsView": {
                metaChanged: this.handleStoreMetaChange
            }
        });
    },

    /**
     * Will update the model with the metaData and
     * will reconfigure the grid to use the
     * new model and columns.
     */
    handleStoreMetaChange: function(store, meta) {
        var testsGrids = Ext.ComponentQuery.query('TestsView')[0];
        testsGrids.reconfigure(store, meta.columns);
    }

});

JSON रिस्पांस: आपके जेसन प्रतिक्रिया में "मेटाडेटा" प्रॉपर्टी शामिल होनी चाहिए। इसे फ़ील्ड को परिभाषित करना चाहिए जैसा कि आप एक स्थिर मॉडल और दृश्य को सामान्य रूप से फ़ील्ड दिखाने के लिए परिभाषित करते हैं।

{
    "success": true,
    "msg": "",
    "metaData": {
        "fields": [
            {
                "name": "poller"
            },
            {
                "name": "poll_date"
            },
            {
                "name": "PING",
                "type": "int"
            },
            {
                "name": "SNMP",
                "type": "int"
            },
            {
                "name": "TELNET",
                "type": "int"
            },
            {
                "name": "SSH",
                "type": "int"
            },
            {
                "name": "all_passed"
            }
        ],
        "columns": [
            {
                "dataIndex": "poller",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "Poller"
            },
            {
                "dataIndex": "poll_date",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "Poll Date"
            },
            {
                "dataIndex": "PING",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "PING",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "SNMP",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "SNMP",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "TELNET",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "TELNET",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "SSH",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "SSH",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "all_passed",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "All Passed",
                "renderer": "RenderFailedTests"
            }
        ]
    },
    "tests": [
        {
            "poller": "CHI",
            "poll_date": "2013-03-06",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "DAL",
            "poll_date": "2013-03-06",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "CHI",
            "poll_date": "2013-03-04",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "DAL",
            "poll_date": "2013-03-04",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "CHI",
            "poll_date": "2013-03-01",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        }
    ]
}




extjs4.1