PDA

View Full Version : Switching between cards in CardLayout is Buggy



Mo-Sencha
26 Oct 2010, 5:24 AM
I have a CardLayout panel with two cards.

Card 1 & Card 2 each contain a carousel with a collection of panels containing dataviews

Alternating between the cards is very buggy, switching between them works the first time but after that Card 2 remains blank.

Calling doLayout() seems to semi-fix the issue but results in a problem somewhere else (Card 2 overwrites on top of Card1 instead of being blank now).

Any ideas how to get around this issue?

Thanks,

evant
26 Oct 2010, 5:37 AM
You need to be much more explicit, saying it's "very buggy" doesn't really provide any basis for giving help.

Mo-Sencha
26 Oct 2010, 6:10 AM
As I mentioned -

Alternating between the two cards the first time seems to work fine.. but after that Card 2 just goes blank.

Mo-Sencha
26 Oct 2010, 6:13 AM
No errors are printed to the console either - so I wasn't sure how to go about debugging this.

Adding card2.doLayout() seems to provide some sort of rehabilitation - but then I face other issues such as Card 2 overwriting Card 1 on the screen and Card 1 not functioning properly.

evant
26 Oct 2010, 6:15 AM
How do you expect anyone to help you if you don't show any code?

Mo-Sencha
26 Oct 2010, 6:26 AM
My apologies - here is the function I wrote to switch between the two cards:



switchCards : function() {
var activeItemIndex = this.items.indexOf(this.getActiveItem());
if(activeItemIndex == 0) {
this.setCard(1);
//this.getActiveItem().doLayout();
this.backButton.show();

}
else {
this.backButton.hide();
this.setCard(0);
}
}


And here is the container the function resides in:



Ext.CardPanel = Ext.extend (Ext.Panel, {
initComponent: function() {
this.layout = {
type : 'card',
sizeAllCards : true,
hideInactive : true,
setOwner: function(owner) {
Ext.layout.CardLayout.superclass.setOwner.call(this, owner);
}
};

this.backButton = new Ext.Button({
hidden: true,
text: 'Back',
ui: 'back',
handler: this.onBackButtonTap,
scope: this
});

this.navigationBar = new Ext.Toolbar({
ui: 'dark',
dock: 'top',
title: this.title,
items: this.backButton
});

this.dockedItems = this.dockedItems || [];
this.dockedItems.unshift(this.navigationBar);

Ext.CardPanel.superclass.initComponent.call(this);
},

onBackButtonTap : function() {
this.switchCards();
},



switchCards : function() {
var activeItemIndex = this.items.indexOf(this.getActiveItem());
if(activeItemIndex == 0) {
this.setCard(1);
//this.getActiveItem().doLayout();
this.backButton.show();

}
else {
this.backButton.hide();
this.setCard(0);
}
},

});

evant
26 Oct 2010, 6:31 AM
Works fine for me:



Ext.CardPanel = Ext.extend(Ext.Panel, {

layout: 'card',

initComponent: function(){

this.backButton = new Ext.Button({
hidden: true,
text: 'Back',
ui: 'back',
handler: this.onBackButtonTap,
scope: this
});

this.navigationBar = new Ext.Toolbar({
ui: 'dark',
dock: 'top',
title: this.title,
items: this.backButton
});

this.dockedItems = this.dockedItems || [];
this.dockedItems.unshift(this.navigationBar);

Ext.CardPanel.superclass.initComponent.call(this);
},

onBackButtonTap: function(){
this.switchCards();
},

switchCards: function(){
var activeItemIndex = this.items.indexOf(this.getActiveItem());
if (activeItemIndex == 0) {
this.setCard(1);
this.backButton.show();

} else {
this.backButton.hide();
this.setCard(0);
}
},

});

Ext.setup({
onReady: function(){
var c = new Ext.CardPanel({
fullscreen: true,
items: [{
html: 'Card 1',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Foo',
handler: function(){
c.switchCards();
}
}]
}]
},{
html: 'Card 2'
}]
});
}
});

Mo-Sencha
26 Oct 2010, 6:53 AM
I guess the issue lies somewhere in using a Carousel of DataView Panels as my cards.

I have written a lot of code to generate the DataViews so I'm not sure how much or what exactly to post.

This may be a vague request but do you have any guidance on how to avoid breaking the functionality of switching when building the cards? Each card consists of a carousel of Dataview panels. Maybe your response can provide me with some direction as to where I can find the problem.

Thanks a lot!

evant
26 Oct 2010, 3:44 PM
Not really, no. Perhaps you could create something runnable that actually demonstrates the issue.

Mo-Sencha
26 Oct 2010, 5:50 PM
Found the issue -

The Dataviews that I was generating eventually had the same id's as dataviews from another card. No errors were being thrown but it made several panels suddenly disappear.