Sencha ExtJS RESTful网格示例

我对ExtJS的Sencha文档感到非常困惑。文档以入门指南开始，该指南强调并说明了应用程序的类和源代码的适当结构的重要性。但是提供的示例打破了《入门指南》中规定的所有惯例。与将代码分解为适当的模型、存储、视图等类文件不同，示例以单个文件的形式提供，其中包含示例源代码，不容易在单独的源文件中重复使用

我从以下门户示例（）开始，因为这是我想要创建的应用程序类型。我想增强门户示例并添加一个屏幕，该屏幕将显示网格并使用RESTfulWeb服务作为数据后端。我已经创建了后端，我只想创建前端。所以我看了RESTful示例（）

我尝试将RESTful示例复制到推荐的独立类模式中，例如Model、Store、View：

型号：

Ext.define('MyLodge.model.Member', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',       type: 'string'},
        {name: 'email',      type: 'string'},
        {name: 'href',       type: 'string'}
    ]
});

商店：

Ext.require('MyLodge.model.Member');

Ext.define('MyLodge.store.Members', {
    autoLoad: true,
    autoSync: true,
    model: 'MyLodge.model.Member',
    proxy: {
        type: 'rest',
        url: 'http://localhost:8888/rest/memberapi/members' ,
        reader: {
            type: 'json',
            root: 'data'
        },
        writer: {
            type: 'json'
        }
    },
    listeners: {
        write: function(store, operation){
            var record = operation.getRecords()[0],
                name = Ext.String.capitalize(operation.action),
                verb;


            if (name == 'Destroy' ) {
                record = operation.records[0];
                verb = 'Destroyed';
            } else {
                verb = name + 'd';
            }
            Ext.example.msg(name, Ext.String.format( "{0} member: {1}", verb, record.getId()));

        }
    }
});

视图：

但我不确定将代码放在何处以控制网格行选择并启用删除按钮：

grid.getSelectionModel().on('selectionchange', function(selModel, selections){
    grid.down('#delete').setDisabled(selections.length === 0);
});

此外，当我按下“添加”按钮时，会出现以下错误：

Uncaught TypeError: Object [object Object] has no method 'insert'.

---

任何帮助都将不胜感激。

您有范围界定问题。基本上，变量

store

仅在initComponent函数中定义，因此属于局部函数范围。 处理函数有自己的作用域。它在工具栏按钮的范围内触发。因此，如果在处理程序中说

this

，它将指向按钮。因此，您可以说

this.up（'panel'）.store

——这为您提供了对支持网格面板的存储的正确引用

---

另一个建议是不要同时实现所有内容。写一点来看看它是否有效，然后一点一点地添加进去。

RE:docs示例，我同意这很令人沮丧，但没有太多选择。每一个示例都有一个完全MVC风格的实现，这不仅会产生繁重的工作量，而且可能会使示例的重点在结构中丢失

RE：关于控制网格的代码“放”在哪里的问题，我建议在control（）部分为网格上的事件设置一个带有侦听器的控制器。这将使您能够将网格触发的事件的处理与视图本身分离

Uncaught TypeError: Object [object Object] has no method 'insert'.