Question

我正在尝试创建一个动态网格类（我不知道有关列的任何信息，但它们是从json响应中给出的，并且网格相应地准备自己）。 Here我找到了我正在寻找的东西，但它给了我一个错误：

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

 });

为了让它运行，我必须做些什么？

Answer 1

这是一篇非常古老的帖子，因此您很快就会有更多变通方法，但该错误是因为您没有为您的商店定义model config或fields config。如果您希望仅使用json数据创建网格，则还需要动态定义模型。

据我所知，字段配置是非常宽容的，所以你可以用最大可能数量的字段设置它，如20或30左右，但字段名称必须与json匹配字段名称可供使用。即如果您使用：

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

然后你的json数据需要来自数据库，如：

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

我过去做的另一件事是首先加载一个引用存储，其中包含一个记录，其中包含每个动态字段（元数据）的名称和数据类型。然后我在每次迭代时遍历此引用存储并added a model field 和列定义，然后我加载了网格的存储，现在已经定义了正确的数据模型，网格将具有正确的列定义。

如果您不想让数据库返回上面所述的通用列名，您可能会做类似的事情，因为我不知道如何在之前将数据加载到网格存储中 / em>你给它一个数据模型来使用。

更新6月13日：

我还没有尝试过，但我刚遇到this in the 4.1 docs（向下滚动到介绍中的“响应元数据”部分）。它描述了在json响应中使用metaData，以使用动态模型和网格列完全实现您的目标。

处理metaData后，您可能仍需要执行上述迭代，但您可以使用它来删除获取元数据的其他请求。

我想如果你的字段配置不随每个请求而改变，那么在开头简单地做额外的请求会更容易，但是如果你想要一些非常动态的东西，那就可以做到。

Answer 2

注意：这是我在此处的回复重复：How do you create table columns and fields from json? (Dynamic Grid)。我只想在解决这个问题的所有StackOverflow问题中解决我的最终解决方案。

Stackoverflow上堆满了与此非常类似的问题。我完成了所有工作并没有找到明确的解决方案。但是，大多数提供的答案都指出了我正确的方向。我会尽最大努力将所有这些建议放在一起并为其他人明确表达：

型号：（仅显示将在所有JSON响应中的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响应： 您的json响应必须包含“metaData”属性。它应该像在静态模型上一样定义字段，并且通常定义为显示字段的视图。

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

使用ExtJS创建动态网格

2 个答案: