使用ExtJS创建动态网格

Question

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

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

这是一篇非常古老的帖子,因此您很快就会有更多的解决方法,但该错误是因为您没有为您的商店定义模型配置或字段配置.如果您希望仅使用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

我过去做过的另一件事是首先加载一个引用存储,它包含一个记录,其中包含每个动态字段(元数据)的名称和数据类型.然后我遍历这个引用存储并在每次迭代时添加了一个模型字段 和列定义,然后我加载了网格的存储,该存储现在已经定义了正确的数据模型,并且网格将具有正确的列定义.

如果您不想让数据库返回上面所述的通用列名,您可能会做类似的事情,因为我不知道如何在将数据模型提供给数据模型之前将数据加载到网格存储中使用.

6月13日更新:

我还没有尝试过,但我刚刚在4.1文档中看到了这一点(向下滚动到介绍中的"响应元数据"部分).它描述了在json响应中使用metaData,以使用动态模型和网格列完全实现您的目标.

一旦处理完metaData,您可能仍然需要执行上面描述的迭代,但您可以使用它来删除获取元数据的额外请求.

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