【问题标题】:Creating a Dynamic Grid with ExtJS使用 ExtJS 创建动态网格
【发布时间】:2012-06-15 02:55:37
【问题描述】:

我正在尝试创建一个动态网格类(我不知道有关列的任何信息,但它们是从 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();

 });

我必须做什么才能让它运行?

【问题讨论】:

    标签: javascript extjs extjs4 gridpanel extjs4.1


    【解决方案1】:

    这是一篇相当老的帖子,因此您可能很快就会有更多解决方法,但该错误是因为您没有为您的商店定义 model configfields 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 fieldand 每次迭代时的列定义,然后我加载了网格的存储,现在已经定义了正确的数据模型和网格会有正确的列定义。

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

    6 月 13 日更新:

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

    一旦处理了元数据,您可能仍需要执行我上面描述的迭代,但您可以使用它来减少获取元数据的额外请求。

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

    【讨论】:

    【解决方案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 响应必须包含“元数据”属性。它应该像在静态模型和通常定义为显示字段的视图上一样定义字段。

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

    【讨论】:

      猜你喜欢
      • 2015-12-10
      • 1970-01-01
      • 2019-03-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-13
      相关资源
      最近更新 更多