如何在 Sencha cmd 应用程序中获取网格（任何容器）引用？

Question

我有一个带有两个（添加和删除）按钮的简单网格作为 sencha cmd 应用程序中的停靠项。我想删除选中的行。

我在视图中定义了网格

xtype:'app-main',
    viewModel: {
        type: 'main'
    },
    layout: 'absolute',
    autoScroll : true,
    resizable:true,
    items: [

        {
            xtype: 'gridpanel',
            x: 10,
            y: 10,
            autoScroll : true,
            renderTo: document.body,
            //height: 300,
            width: 300,
            title: 'Grid Panel',

            store: 'peopleStore',

            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'id',
                    text: 'Id'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'title',
                    text: 'Title'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'body',
                    text: 'Body'
                }
            ],

            dockedItems: [{
            xtype: 'toolbar',
            items:[
                    {
                        xtype: 'button',
                        x: 330,
                        y: 10,
                        scale: 'medium',
                        text: 'Add New Record',
                        handler: function() {

                            var UserStore = Ext.getStore('peopleStore');
                            UserStore.add({title: 'asd', body:'asdasd'});
                            UserStore.sync();
                            UserStore.load();
                        }
                    },

                    {
                        xtype: 'button',
                        scale: 'medium',
                        text:  'Reset Records',
                        handler: function() {

                                //delete code will go here
                            }
                    }]
        }]}]

有了这个 Whosebug 问题 extjs how to get a grid

我知道代码会像

grid.getView().getSelectionModel().getSelection()[0];
                                    if (selection) {
                                        UserStore.remove(selection);
                                    }

但是有人可以告诉我如何获取对 "grid" 的引用吗？

Answer 1

获取作为网格的第一个父项（相对于按钮）：

xtype: 'button',
...
handler: function(button) {
    var grid = button.up('gridpanel');
    console.log("my grid", grid);
}

获取作为网格且具有 itemId "myGrid"（以防止歧义）的第一个父项（相对于按钮）：

xtype: 'gridpanel',
itemId: 'myGrid',
...
    xtype: 'button',
    ... 
    handler: function(button) {
        var grid = button.up('gridpanel #myGrid');
        console.log("myGrid", grid);
    }

我强烈建议查找 ExtJS 中的选择器（对于 ExtJS <= 5）和 ViewControllers 中的引用（对于 ExtJS 5）。两者都有 pros/cons，所以我建议阅读它们 (though both do very similar things)。我的解决方案使用选择器。

这里有一些资源：

http://docs.sencha.com/extjs/5.0/application_architecture/view_controllers.html

http://training.figleaf.com/tutorials/senchacomplete/chapter2/lesson5/2.cfm http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Query（完整的选择器语法列表）

如何在 Sencha cmd 应用程序中获取网格（任何容器）引用？

How to get grid (any container) reference in Sencha cmd application?

extjs

sencha-cmd