PDA

View Full Version : Recreating a previously destroyed panel causes JavaScript exception



chemicaloli
20 Jun 2011, 6:29 AM
I've implemented a controller that renders one of two panels (Home and Other) into my viewport when a button on a toolbar docked to the bottom of the viewport is clicked. As my app will eventually contain a lot of panels I am destroying each panel when its deactivate event is fired. This seems to work until I try and return to a panel that has previously been destroyed.

For example the Home panel is rendered by default to the viewport, then I click the "other" button then click "home" I get an error that says...


Uncaught TypeError: Cannot read property 'parentNode' of undefined

This is my Controller....


Ext.regController("AppController", {
home: function() {
this.homePanel = this.render({
xtype: 'home-panel',
listeners: {
deactivate: function (p)
{
console.log("DEACTIVATED home")
p.destroy();
}
}
})

application.viewport.setActiveItem(this.homePanel, 'slide');
},
other: function() {
this.otherPanel = this.render({
xtype: 'other-panel',
listeners: {
deactivate: function (p)
{
p.destroy();
}
}
})
application.viewport.setActiveItem(this.otherPanel, 'slide');
}
});

And the View for my Home Panel. The Other Panel is identical so I have omitted it.


application.views.HomePanel = Ext.extend(Ext.Panel, {
layout: {
type: 'vbox',
align: 'stretch'
},
initComponent: function() {

this.panel1 = new Ext.Panel({
layout: 'auto',
html: 'this is a panel',
style: 'background-color:red;',
flex: 2
});

this.panel2 = new Ext.Panel({
layout: 'auto',
html: 'this is a panel too',
style: 'background-color:blue;',
flex: 1
});

this.items = [this.panel1, this.panel2];

application.views.HomePanel.superclass.initComponent.apply(this, arguments)
}
});

Ext.reg('home-panel', application.views.HomePanel);
console.log('home-panel view registered');


And finally the code for my Viewport....


TestApplication.viewport = Ext.extend(Ext.Panel, {
id : 'viewport',
layout : 'card',
fullscreen: true,
dockedItems : [{
xtype: 'toolbar',
itemId: 'topBar',
dock: 'top',
title: 'Title Here',
ui: 'dark',
items:[{
xtype: 'spacer'
},{
itemId: 'addButton',
iconCls: 'add',
iconMask: true,
ui: 'plain',
handler: this.onAddTap,
scope: this
}]
},{
xtype: 'toolbar',
itemId: 'bottomBar',
dock: 'bottom',
items:[{
xtype: 'button',
itemId: 'btn1',
ui: 'normal',
handler: function(){
console.log('Button 1 pressed')
Ext.Dispatcher.dispatch({
controller:"AppController",
action:"other"
});
},
text: '1'
},{
xtype: 'button',
itemId: 'btn2',
ui: 'normal',
handler: function(){
console.log('Button 2 pressed')
Ext.Dispatcher.dispatch({
controller:"AppController",
action:"home"
});
},
text: '2'
}]
}]
});

chemicaloli
20 Jun 2011, 6:48 AM
Ok, I have no idea why but this now (nearly) works. The problem I now have is that there is no transition animation between panels. The first panel disappears and the second panel instantly appears over it despite calling...


application.viewport.setActiveItem(this.homePanel, 'slide');

Any ideas?

chemicaloli
20 Jun 2011, 7:02 AM
Ok, fixed that too. If you add


cardSwitchAnimation: 'slide'

to the panel config then the transitions work. I still don't understand why setActiveItem is being ignored though. What would I do if I wanted to reverse the animation direction?

digil
20 Jun 2011, 7:12 AM
You have 2 options for reversing the direction, either set
reverse : true or
direction : 'right' (or 'left', 'up', 'down')

chemicaloli
20 Jun 2011, 7:18 AM
You have 2 options for reversing the direction, either set
reverse : true or
direction : 'right' (or 'left', 'up', 'down')

Thanks for the reply. I realise I can do that, my problem is that I cant do it dynamically because the setActiveItem call is being ignored so I have to rely on hard coding the reversal into the panel config which is fine unless I have a panel that could go either left or right depending on the context in which it is activated.