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

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)