Question

我对ExtJS的Sencha文档感到非常困惑。文档以入门指南开头，该指南强调并说明了适用于应用程序的类和源代码的结构的重要性。但是，提供的示例将破坏“入门指南”中规定的所有约定。而不是将代码分解为适当的模型，存储，视图等类文件，而是将示例作为单个文件提供，其中包含不能在单独的源文件中轻松重用的示例源代码。

我开始关注Portal示例（http://docs.sencha.com/ext-js/4-1/#!/example/portal/portal.html），因为这是我想要创建的那种应用程序。我想增强Portal示例并添加一个屏幕，该屏幕将显示一个网格并使用RESTful Web服务作为数据后端。我创建了后端，我只想创建前端。所以我查看了RESTful示例（http://docs.sencha.com/ext-js/4-1/#!/example/restful/restful.html）

我试图将RESTful示例复制到单独类的推荐模式中，例如型号，商店，查看：

型号：

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()));

        }
    }
});

查看：

Ext.define('MyLodge.view.content.MemberGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.membergrid',

    initComponent: function(){

        var store = Ext.create('MyLodge.store.Members' );

        Ext.apply( this, {
            height: this.height,
            store: store,
            stripeRows: true,
            columnLines: true,
            columns: [{
                id       : 'name',
                text   : 'Name',
                flex: 1,
                sortable : true,
                dataIndex: 'name'
            },{
                text   : 'E-Mail',
                width    : 150,
                sortable : true,
                dataIndex: 'email'
            },{
                text   : 'Href',
                width    : 200,
                sortable : true,
                dataIndex: 'href'
            }],
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Add',
                    iconCls: 'icon-add',
                    handler: function(){
                        // empty record
                        store.insert(0, new MyLodge.model.Member());
                        rowEditing.startEdit(0, 0);
                    }
                }, '-', {
                    itemId: 'delete',
                    text: 'Delete',
                    iconCls: 'icon-delete',
                    disabled: true,
                    handler: function(){
                        var selection = grid.getView().getSelectionModel().getSelection()[0];
                        if (selection) {
                            store.remove(selection);
                        }
                    }
                }]
            }]
        });

        this.callParent(arguments);
    }
});

但我不知道在哪里放置代码来控制网格行选择并启用删除按钮：

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

当我按下添加按钮时，我收到以下错误：

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

任何帮助都将不胜感激。

Answer 1

您遇到了范围问题。基本上，变量store仅在initComponent函数中定义，因此在本地函数作用域中定义。你的处理函数有它自己的范围。它在工具栏按钮的范围内触发。因此，如果您在处理程序中说this，它将引用该按钮。因此，您可以说this.up('panel').store - 这为您提供了支持网格面板的商店的正确引用。

另一个建议是不要一次实现所有内容。写一点，看它是否有效，然后一点一点地加入它。

Answer 2

RE：文档示例，我同意这令人沮丧，但没有太多选择。对每个示例进行完全MVC样式的实现不仅会产生繁重的工作，而且可能会使示例在结构中丢失。

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

Sencha ExtJS RESTful网格示例混乱

2 个答案: