Jak utworzyć kolumny tabeli i pola z json? (Dynamic Grid)

Question

Mam plik json i zakładam, że nie wiem nic na temat zawartości. Nie znam modelu. Jednak w pliku json jest podany model, dane i inne informacje o siatce. Jak utworzę kolumny itp. W ten sposób?

Answer 1

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json -> metadane Response sekcja

w siatce nie zapomnij dodać ten jeden columns: [], następnie pod sklepie listeners: { 'metachange': function(store, meta) { myGrid.reconfigure(store, meta.columns); } } i pliku json odpowiedź powinna metadanych z pól i kolumn . Przeczytaj artykuł Response MetaData sekcja w dokumentacji, aby uzyskać więcej informacji.

Answer 2

Możesz utworzyć definicję siatki w środowisku wykonawczym. Spójrz na metody reconfigure: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-reconfigure

Answer 3

Stackoverflow jest zaśmiecony pytaniami bardzo podobnymi do tego. Przepracowałem je wszystkie i nie znalazłem ostatecznego rozwiązania. Jednak większość udzielonych odpowiedzi wskazała mi właściwy kierunek. dam mi najlepszą szansę na wprowadzenie tych wszystkich razem i sugestie co to oczywiste dla innych:

Model: (. Tylko pokazuje, 2 pola, które będą we wszystkich odpowiedziach JSON nadal będą nadpisane)

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

Widok: (kolumny zostaną określone w każdej odpowiedzi 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); 
    } 

}); 

Kontroler: (Kontroler nie wszystkie prace w zmuszając do widoku i modelu zmieniają się w zależności od odpowiedzi 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 odpowiedzi: Twoja odpowiedź json musi mieć "metadane" właściwość włączone. Powinien definiować pola dokładnie tak, jak na modelu statycznym i widok, który normalnie byłby zdefiniowany, aby pokazywał pola.

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