javascript - 使用 ExtJS 创建动态网格

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 匹配它可用的字段名称。 IE。如果你使用:

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 和每次迭代时的列定义，然后我加载了网格的存储，现在定义了正确的数据模型，并且网格将具有正确的列定义。

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

6 月 13 日更新:

我还没有尝试过，但我刚遇到 this in the 4.1 docs (向下滚动到简介中的“响应元数据”部分)。它描述了在您的 json 响应中使用元数据来准确地完成您要使用动态模型和网格列的目的。

处理完元数据后，您可能仍需要进行我上面描述的迭代，但您可以使用它来减少获取元数据的额外请求。

我想如果您的字段配置不随每个请求而改变，那么在开始时简单地执行额外请求会更容易，但如果您想要真正动态的东西，这会做到。