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

Question

I have a simple grid with two(add and remove) buttons as docked item in sencha cmd application. I want to delete the selected row.

I have grid defined in my view as

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

With this stackoverflow question extjs how to get a grid

I know code will be some thing like

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

But can someone tell me how to get reference to "grid" ?

Answer 1

Grabs the first parent (relative to the button) that is a grid:

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

Grabs the first parent (relative to the button) that is a grid and has itemId "myGrid" (to prevent ambiguity):

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

I would heavily suggest looking up selectors in ExtJS (for ExtJS <= 5) and references in ViewControllers (for ExtJS 5). There are pros/cons to both so I would recommend reading about both of them (though both do very similar things). My solution uses selectors.

Here are some resources:

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 (complete selector syntax list)