View Full Version : Nested tab panel in grid rowexpander

18 Jan 2014, 4:45 AM
Hello all. I have the grid panel with rowexpander and in the expanded row I show the tab panel with form in one tab and grid into another. But rows in this grid are not selectable and clickable. Display fields in the form are not selected by my mouse. What I need to do to fix this problem?

plugins: [
ptype: 'rowexpander',
rowBodyTpl: ['<div class="panel-op-details"></div>'],
expandOnRender: true,
expandOnDblClick: false

var div = Ext.DomQuery.select('div .panel-op-details', expandRow)[0];
if (div.firstChild != null) return;
var tabControl = Ext.ComponentQuery.query('#rootTabCtrl')[0];
var tab = tabControl.getActiveTab();
var layout = tab.layout;
var _panel = layout.activeItem;
var grid = _panel.items.items[2];
var selModel = grid.view.getSelectionModel();
var tpId = selModel.selected.items[0].data.TpId;
var itemId = tab.orderId + '-' + tpId + '_' + record.data.pos + '_' + selModel.selected.items[0].data.PosN;
var _itemId = '#' + itemId;
var panels = Ext.ComponentQuery.query(_itemId);
if (panels.length > 0)
var panel = Ext.create('SMM.view.OrderDetails.OperationDetails', {
itemId: itemId,
renderTo: div

Gary Schlosberg
18 Jan 2014, 8:03 AM
If I understand correctly, you are nesting grids within each other, which is not supported. You also have a tabpanel in the mix, and handling all of the events for these components seems to be getting scrambled.

20 Jan 2014, 1:53 AM
I have tab panel into expander with form and grid. Tabs are changed sucessful, form and grid are loading data and displaying but click and select events are not fired. Sorting and resizing columns in the grid are works. I think that nested grids are very useful functionality and it will be very good to support this feature in new releases of ExtJS library