View Full Version : Add/remove/add a grid panel to a tab panel parent it fubars the ui

29 Sep 2012, 7:33 AM
When I add/remove/add a grid panel to a tab panel parent it fubars the ui so that it is unusable. The layout for the ui is a border layout with a west and center region. A menu is in the west region, and a tab panel in the center region. Referring to the attachments, Capture1 shows the upper left area of the ui before adding the grid panel, Capture 2 shows the ui after adding the grid panel when the Cases menu item is clicked - everything normal, Capture 1 shows the ui after clicking the close button on the Cases tab which removes the grid panel from the tabs - everything still normal, Capture 3 shows the ui after clicking on Cases again in the menu. The center region containing the tab panel gets completely fubar'd here, and I don't know what I am missing. I do have autoDestroy: true in the config for the grid panel. Also note: this only happens with the grid panel. When I add/remove/add a form panel the ui reacts as expected.

29 Sep 2012, 7:58 AM
Just found this error on the console:
Uncaught TypeError: Cannot read property 'addCls' of nullAbstractComponent.js:2485 (http://vm117/mpowered/atmgodevel/extjs/src/AbstractComponent.js?_dc=1348933826524)

29 Sep 2012, 8:11 AM
Now, searching the forum for that error message, I have found the answer. Seems the dockedItems config in the grid panel needs to be wrapped in the initComponent function. This fixed the problem!

initComponent: function () {
Ext.apply(this, {
dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
store: Ext.data.StoreManager.lookup('Simpsons')