PDA

View Full Version : Reusable tbar + rowCtx for Grids



LeonM
16 Mar 2011, 8:30 AM
I am trying to make standardized reusable menu's for certain type of grids (IE a grid with usernames or a grid with adresses). I want to have the same buttons in both the topbar and the rowctxmenu.

Each button will have to find the selected row's ID value, so I used:

this.findParentByType('grid').getSelectionModel().getSelected().get("ID");This works fine for the topbar items, but not when I use them in a rowCtxMenu.



var buttons = [
{
text: 'Show details',
handler: function(){
showDetails(this.findParentByType('grid').getSelectionModel().getSelected().get("Id"));
}
},{
text: 'Delete',
handler: function(){
deleteRow(this.findParentByType('grid').getSelectionModel().getSelected().get("Id"));
}
}
];

var grid = new Ext.grid.GridPanel({
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
rowCtxMenu: new Ext.menu.Menu({
items: buttons
}),
tbar: new Ext.Toolbar({
items : buttons
})
});

autoLijstGrid.on('rowcontextmenu',function(grid, rowIdx, evtObj){
evtObj.stopEvent();
grid.getSelectionModel().selectRow(rowIdx);
grid.rowCtxMenu.showAt(evtObj.getXY());
});
When I click on a RowCtxMenuItem, I get
this.findParentByType("grid") is null In the tbar it works just fine.

LeonM
16 Mar 2011, 8:45 AM
Now that I think of it, the rowCtxMenu is rendered using showAt(), so it probably doesn't have a parent at all.

I could set a variable in the 'rowcontextmenu' event hander of the grid, that points to the grid.


grid.on('rowcontextmenu',function(grid, rowIdx, evtObj){
evtObj.stopEvent();
grid.getSelectionModel().selectRow(rowIdx);
gridname = grid;
grid.rowCtxMenu.showAt(evtObj.getXY());
});And for the button handler:


handler: function(){
thisgrid = if(this.findParentByType('grid'))? this.findParentByType('grid') : gridname;
showDetails(thisgrid.getSelectionModel().getSelected().get("Id"));
}But there must be a better solution!