Creazione di una Griglia Dinamica con ExtJS

Sto cercando di fare una Griglia Dinamica di classe (dove non so per qualsiasi informazione sulle colonne, ma esse sono date da json di risposta e la cingerà la veste e si prepara di conseguenza). Qui Ho trovato esattamente quello che cercavo, però mi dà un errore:

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

Ho provato ad aggiungere proxy e modello, ma non era successo, ho mantenuto sempre lo stesso errore.

Qui è il ExtJS codice su cui sto lavorando:

 //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();

 });

Cosa devo fare per poter farlo funzionare?

InformationsquelleAutor ilhan | 2012-06-12

 

2 Replies
  1. 9

    Che è piuttosto vecchio post così si può avere più soluzioni in arrivo, ma che errore è perché non si dispone di un modello config o campi config definiti per il tuo negozio. Il modello dovrà anche essere definito in modo dinamico se si desidera che la vostra griglia creata con dati json da solo.

    Per quanto ne so, i campi di configurazione è piuttosto perdonare, in modo che si può essere in grado di impostare semplicemente questo con un numero massimo possibile di settori come 20 o 30 o giù di lì, ma il campo nomi devono corrispondere con json nomi di campo per essere utilizzabile. I. e. se si utilizza:

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

    Quindi i tuoi dati in formato json sarebbe necessario provengono dalla banca dati come:

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

    Un’altra cosa che ho fatto in passato è quello di avere un riferimento di archivio caricato per primo che conteneva un record con il nome e il tipo di dati per ciascuno dei campi dinamici (meta dati). Poi ho iterati questo riferimento di archivio e aggiunto un campo modello e la definizione di colonna ad ogni iterazione, poi ho caricato la griglia store, che ora aveva il corretto modello di dati definiti e la griglia sarebbe la colonna corretta definizione.

    Si può avere fare qualcosa di simile se non si desidera rendere il vostro database di ritorno generici nomi di colonna come sopra disciplinati, perché non so come caricare i dati nella griglia store inizialmente prima un modello di dati da utilizzare.

    AGGIORNAMENTO 13 Giu:

    Ho ancora provato, ma mi sono imbattuto in un questo il 4.1 documenti (scorrere verso il basso per la “Risposta Metadati” nella sezione intro). Esso descrive l’utilizzo di metadati nella tua risposta json per realizzare esattamente ciò che si sta andando per un modello dinamico e colonne della griglia.

    Si sarebbe probabilmente ancora fare il iterazione che ho descritto sopra, una volta che il processo di metadati, ma si può usare per tagliare ulteriore richiesta per ottenere i meta dati.

    Suppongo che se il tuo campo di configurazione non cambia con ogni richiesta, quindi sarebbe più facile semplicemente di fare extra richiesta all’inizio, ma se volete qualcosa di davvero dinamico, questo dovrebbe fare.

  2. 3

    NOTA : Questo è un duplicte la mia risposta qui : Come si fa a creare le colonne della tabella e campi da json? (Griglia Dinamica) . Volevo solo rivolgere la mia soluzione finale a tutti i StackOverflow domande che ho usato per risolvere questo problema.

    Stackoverflow è pieno di domande molto simili a questo. Ho lavorato con tutti e non trovare una soluzione definitiva. Tuttavia, la maggior parte delle risposte mi hanno indirizzato nella giusta direzione. Io mi darà il colpo migliore a mettere tutti questi suggerimenti insieme e di rendere questo chiaro per gli altri:

    Modello: (mostra Solo 2 campi che saranno in tutte le risposte JSON. Sarà ancora sovrascritti)

    Ext.define('RTS.model.TestsModel', {
        extend: 'Ext.data.Model',
        alias: 'model.TestsModel',
    
        fields: [
            {
                name: 'poll_date'
            },
            {
                name: 'poller'
            }
        ]
    });

    Store:

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

    Vista: (Le colonne saranno definiti in ogni risposta 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);
        }
    
    });

    Controller: (Il controller fa tutto il lavoro a forzare la vista e il modello cambia in base alla risposta 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 di Risposta:
    La tua risposta json deve avere i “metadati” di proprietà incluso. È necessario definire i campi, proprio come si farebbe su un modello statico ed il panorama che si sarebbe normalmente essere definito per mostrare i campi.

    {
        "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"
            }
        ]
    }

Lascia un commento