PDA

View Full Version : Back Button and Card Active Item For Panel



claytantor
5 Dec 2010, 4:50 PM
Hey Sencha Peoples,

I am looking forward to meeting all of you tomorrow night, hopefully I will learn a lot more about how this framework sticks together. One thing I have found is that sometimes it does not behave exactly as I expect, but that may be that my expectations are screwy.

I am having problem controlling a two card panel so that I can have a back button. It seems that when I call the setActiveItem method from the list it slides just fine to the form with the showForm() method. On the form I have a back button, which calls its parent's showList() method. The slide animation happens just fine, but the panel that is shows is completely empty. This seems strange, and should be simple (it seems). I am using 0.9.0 but please dont tell me upgrade unless you are pretty sure that's the problem. Dealing with upgrade churn is a hassle unless it actually improves the situation.


ratecred.views.PlacesView = Ext.extend(Ext.Panel,
{
initComponent: function() {
Ext.apply(this,
{
//cardSwitchAnimation: 'slide',
layout: {
type: 'card',

},
items: [
{
xtype: 'placesList',
layout: {
type: 'fit'
}
},
{
xtype: 'ratingForm',
layout: {
type: 'fit'
}
}
]
});
ratecred.views.PlacesView.superclass.initComponent.apply(this, arguments);
},
showRating: function(place) {
console.log('show rating panel');
if (this.layout) {
var ratingForm = this.items.items[1];
ratingForm.setPlace(place);
this.setActiveItem(1, {
type: 'slide', direction: 'left'
});
}
},
showList: function() {
console.log('show list panel');
if (this.layout) {
var list = this.items.items[0];
this.setActiveItem(0,{
type: 'slide', direction: 'right'
});
}
}
})

Ext.reg('placesView',ratecred.views.PlacesView);

evant
5 Dec 2010, 4:59 PM
It's entirely possible that it's a bug, 0.90 was essentially the first public release, almost 6 months ago!

claytantor
5 Dec 2010, 9:10 PM
Nope, painfully upgraded to 1.00, exact same behavior.

http://www.youtube.com/watch?v=IBGSrDtEM9M


http://www.youtube.com/watch?v=IBGSrDtEM9M

evant
5 Dec 2010, 9:24 PM
Ok, in that case you'll need to put together a runnable test case. There's too many missing pieces, the problem could exist in the subclasses.

claytantor
7 Dec 2010, 9:24 PM
This is starting to feel like a bug, I would love to know if I am banging my head against the wall or not. I also tried a listener approach that did not seem to work either.

Entire Project as ZIP File (http://media.ratecred.com.s3.amazonaws.com/dev/share/panels.zip)

index.js



Ext.regApplication({
name: "ratecred",
icon: 'resources/images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'resources/images/phone_startup.png',
tabletStartupScreen: 'resources/images/tablet_startup.png',

/**
* This is called automatically when the page loads. Here we set up the main component on the page - the Viewport
*/
launch: function() {
Ext.dispatch({
controller: 'main',
action : 'show'
});
}
});


main.js - The controller



Ext.regController("main", {
show: function() {
this.render({
xtype: 'cardPanelView'
});
},
});


CardPanelView.js



ratecred.views.CardPanelView = Ext.extend(Ext.Panel, {
fullscreen: true,
initComponent: function() {
Ext.apply(this, {
layout: { type: 'card', },
items: [
{ xtype: 'cardZero', },
{ xtype: 'cardOne', }
]
});

ratecred.views.CardPanelView.superclass.initComponent.apply(this, arguments);
},

});

Ext.reg('cardPanelView', ratecred.views.CardPanelView);


CardZero.js



ratecred.views.CardZero = Ext.extend(Ext.Panel, {
fullscreen: true,
scope: this,

initComponent: function() {
Ext.apply(this, {
xtype: 'panel',
layout: { type: 'vbox', pack: 'center' },
items: [
{ xtype: 'button', text:'goto panel 1', handler: this.show}
]

});

ratecred.views.CardZero.superclass.initComponent.apply(this, arguments);
},

show: function(button, event) {
console.log('show');
if(button != null)
{
button
.ownerCt
.ownerCt
.layout
.setActiveItem(1, {type: 'slide', direction: 'left'});
}
}
});

Ext.reg('cardZero', ratecred.views.CardZero);



CardOne.js



ratecred.views.CardOne = Ext.extend(Ext.Panel, {
fullscreen: true,
scope: this,

initComponent: function() {
Ext.apply(this, {
xtype: 'panel',
layout: { type: 'vbox', pack: 'center' },
items: [
{ xtype: 'button', text:'goto panel 0', handler: this.show}
]

});

ratecred.views.CardOne.superclass.initComponent.apply(this, arguments);
},

show: function(button, event) {
console.log('show');
if(button != null)
{
button
.ownerCt
.ownerCt
.layout
.setActiveItem(0, {type: 'slide', direction: 'right'});
}
}
});

Ext.reg('cardOne', ratecred.views.CardOne);

claytantor
7 Dec 2010, 9:46 PM
Ok I think I know what is going on, the cards should NOT be set to fullscreen, the parent is fullscreen already. Will post solution when finished.