javascript - 动态模型、商店和 View ——最好的方法

Question

注意:作者是 EXT JS 的新手，正在尝试在他的元素中使用 MVC

假设我有一个数据模型不固定的 Web 服务。我希望动态创建我的模型，从中我动态创建商店，因此动态组件的数据在这些商店中。

让我们从查看模型的示例类定义开始:

Ext.define('MNESIA.model.User', {       extend: 'Ext.data.Model' });

在此模型定义中，我省略了配置对象中的 'fields' 参数。这是因为无论何时我创建上述类型的模型实例，我都想动态地给它字段定义，换句话说，我可以有很多这个模型的实例，但它们的 'fields' 都有不同的定义 参数。

我从这里创建商店的定义，如下所示:

Ext.define('MNESIA.store.Users', {    extend: 'Ext.data.Store',       autoLoad: true      }});

在那里，我有一个商店定义。我省略了 'model' 参数，因为我会将它动态附加到此类的每个实例。事实上，甚至没有提到 'data' 和 'proxy' 设置，因为我想在这个商店的实例化期间分配它们。

从那里开始，我希望拥有由动态商店驱动的动态 View 。下面我有一个网格的定义

Ext.define('MNESIA.view.Grid' , {    extend: 'Ext.grid.Panel',       alias : 'widget.mygrid',    width: 700,    height: 500});

我在网格规范中省略了以下参数:'columns'、'store' 和 'title'。这是因为我打算创建许多网格作为上述规范的实例，但具有动态存储、标题和列定义。

在我的 Controller 中的某个地方，我有一些代码如下所示:

    function() {        var SomeBigConfig = connect2Server();        /*        where:             SomeBigConfig = [                                           {"model":[                                    {"fields":                                        ["SurName","FirstName","OtherName"]                                    }                                ]                                },                                                          {"store":[                                    {"data":                                        {"items":[                                            {"SurName":"Muzaaya","FirstName":"Joshua","OtherName":"Nsubuga"},                                            {"SurName":"Zziwa","FirstName":"Shamusudeen","OtherName":"Haji"},                                            ...                                            ]                                        }                                                                   },                                    {"proxy": {                                        "type": "memory",                                                                           "reader": {                                            "type": "json",                                            "root": "items"                                        }                                        }                                    }                                                               ]                                },                                                          {"grid",[                                            {"title":"Some Dynamic Title From Web Service"},                                            {"columns": [{                                                "header": "SurName",                                                "dataIndex": "SurName",                                                "flex": 1                                            },{                                                "header": "FirstName",                                                "dataIndex": "FirstName",                                                "flex": 1                                            },                                            {                                                "header": "OtherName",                                                "dataIndex": "OtherName",                                                "flex": 1                                            }                                            ]}                                                                  ]                                    }                            ]        */        var TheModel = Ext.create('MNESIA.model.User',{                        fields: SomeBigConfig[0].model[0].fields                });        var TheStore = Ext.create('MNESIA.store.Users',{                        storeId: 'users',                        model: TheModel,                        data: SomeBigConfig[1].store[0].data,                        proxy: SomeBigConfig[1].store[1].proxy                });         var grid = Ext.create('MNESIA.view.Grid',{                                  store: TheStore,                        title: SomeBigConfig[2].grid[0].title,                        columns: SomeBigConfig[2].grid[1].columns                                       });        // From here i draw the grid anywhere on the, page say by        grid.renderTo = Ext.getBody();        // end function        }

现在这种动态创建模型、存储和网格确实会导致内存浪费，因此每次我们想要销毁该组件时都需要调用每个组件的销毁方法。

问题:

问题 1:EXT JS 4 的 MVC 实现是否允许这样做？

问题 2: 我如何通过使用我的新类的 xtypes 获得相同的功能。比如说:

   {     xtype: 'mygrid',     store: TheStore,     title: SomeBigConfig[2].grid[0].title,     columns: SomeBigConfig[2].grid[1].columns   }

Qn 3: 如果我上面写的确实有效并且在实用上是正确的，我可以将它应用于所有组件，如 Panels、TabPanels、Trees(它们的 Configs由远程服务器发送)？

Qn 4: 如果我有 Controller A 和 B， Controller A 有 View 规范:[C, D]， Controller B 有 View :[E, F]，会不会是如果 View 生成的操作正确:E 由 Controller A 处理？即 Controller 可以处理未在其 View 配置中注册的 View 的操作吗？

注意:我对 Ext JS 很陌生，但很想了解更多。建议我如何改进我的 EXT JS 学习曲线。谢谢

Answer 1

在我的选择中，您的模型必须映射到要呈现给 View 的商店，例如，如果像这样实现模型部分

 {"model":[{"fields":[{name:'name',type:'string'},            {name:'id',type:'string'}]}]}

，这将很容易地映射到 View 渲染它的商店。