PDA

View Full Version : TabPanel reopen cause exception



lucasrc
18 Oct 2010, 4:51 AM
I have a Ext.TabPanel and I will add in my application tabs and tabs I add these grids.
When I close the tab that has the grid on and try to open it again there is an exception in the javascript.
[Exception ... "Operation is not supported" code: "9" nsresult: "0x80530009 (NS_ERROR_DOM_NOT_SUPPORTED_ERR)" location: "http://localhost/loja/js/extjs/adapter/ext/ext-base-debug.js Line: 1253"] {constructor = DOMException, more ...}

This exception is caused because the second time that the grid will be rendered it is no longer a pure html. Is mixed and html objects and it passes through this function is the exception.

How do I remove the tab and all references that are within each tab? Is there any other way to do this without triggers?

Here is a bit of code below:

TreePanel
children : [
{
text : 'Lojas cadastradas',
leaf : true,
tabPanelConfig : {
object : appLoja,
objectId : 'list',
listeners : {
render : function(tab) {
tab.add(appLoja.grid.getGrid());
}
}
}
},

TreePanel Listeners

listeners : {
click : function(node, event) {
//Gerencia os clicks do menu a chamda métodos do managerConfig
try {
if (node.attributes.tabPanelConfig) {

var config = node.attributes.tabPanelConfig;
config.id = config.object.id.get(config.objectId).id;
config.title = config.object.id.get(config.objectId).text;
panelManager.add(config);
}
}catch(e) {
console.log(e);
}
}
},


TabPanel

var tabPanel = new Ext.TabPanel({
id : 'tabPanel',
region : 'center',
resizeTabs : true,
autoScroll : true,
defaults : {
autoScroll : true,
autoTabs : true,
closable : true,
layout : 'table',
listeners : {
close : function(object) {
//Permite com que a aba seja aberta novamente
panelManager.remove(object.id);
object.container.clean();
object.removeAll();
},
activate : function(tab) {
/*
console.log(Ext.getCmp(tab.getItemId()));
Ext.Msg.alert('Ativa', 'Ativar');
*/
}
}
}
});

Condor
18 Oct 2010, 4:59 AM
Closing a tab will destroy all components inside the tab. When you want to add the tab again, you will need to recreate all inner components.

lucasrc
18 Oct 2010, 5:02 AM
It was what I had imagined. But I do not know how to recreate these objects with plain html. Is there any method to do this? I'm using grids and panels.
Thanks.

Condor
18 Oct 2010, 5:11 AM
Recreate with plain HTML? Why?

Where are those panels and grids created?

lucasrc
18 Oct 2010, 5:16 AM
Are created in the listener's my tab.

Example :

listeners: {
render: function (tab) {
tab.add (appLoja.grid.getGrid ());
}
}

When I close that tab, I get the impression that the rendering of the grid goes somewhere. And the time running the listener even the problem of exception occurs.

Condor
18 Oct 2010, 5:19 AM
So, what does getGrid() return? It needs to return a new instance (including a new column model) every time.

lucasrc
18 Oct 2010, 5:22 AM
Yes, return a new instance of grid.

return new Ext.grid.EditorGridPanel(Ext.apply(defaultGridConfig, parent.config.data.gridPanelConfig));

lucasrc
18 Oct 2010, 5:47 AM
From what I saw all the elements that are children are not rendered the second time. Precisely because they are transformed into objects rather than plain html.
In the function that does this check bursts exception.

Condor
18 Oct 2010, 5:56 AM
I still don't get why you are referring to 'plain HTML'...

lucasrc
18 Oct 2010, 6:01 AM
It is because the exception is generated by javascript reference from a function that checks if the element is an ancestor.
When the flap is opened for the second time the content it contains not only pure html, but also contains objects.

Condor
18 Oct 2010, 6:22 AM
No, that's normal.

I still assume that the problem is that you are trying to render a component again that was destroyed before.

lucasrc
18 Oct 2010, 6:31 AM
The script ensures that only one tab will be opened with a component. But I really do not know why this is happening.
I've tried several things and still get an error rendering

lucasrc
18 Oct 2010, 9:20 AM
Anyone else have any suggestions?

lucasrc
18 Oct 2010, 10:23 AM
solution :

var tabPanel = new Ext.TabPanel({
id : 'tabPanel',
region : 'center',
resizeTabs : true,
autoScroll : true,
autoDestroy : false,
defaults : {
autoScroll : true,
closable : true,
layout : 'table',
listeners : {
close : function(object) {
//Permite com que a aba seja aberta novamente
panelManager.remove(object.id);
object.hide(); //solution is here
},
activate : function(tab) {
tab.doLayout();
}
}
}
});