PDA

View Full Version : Problems with MVC and setActiveItem not working



mteichtahl
1 Sep 2011, 9:16 PM
Hi All,

Im building a small MVC based touch app.

Basically, there is an image on the first 'view'/'card', when tapped this card should flip and display another card. However, when I setActiveItem the initial card is redisplayed, even though i call the "flip" function properly. I have included the code snippets below and im hopeful that someone might be able to assist me troubleshooting this problem. My thanks in advance

/apps/controllers/cardsController.js

Ext.regController('CardsController',{


'index': function (options) {
console.log('cardsController/index')

SnappsCard.views.viewport.setActiveItem(SnappsCard.views.detailView);

},


'flipCard': function (options) {
var vp = Ext.getCmp('viewport');
vp.setActiveItem(options.page, options.animation);
console.log('Flip');
}



});


SnappsCard.controllers.cardsController = Ext.ControllerManager.get('CardsController');


/views/Viewport.js

SnappsCard.views.Viewport = Ext.extend(Ext.Panel, {
id: 'viewport',
fullscreen: true,
layout: 'card',
initComponent: function () {

console.log('creating viewport');

Ext.apply(SnappsCard.views, {
cardView: new SnappsCard.views.CardView(),
detailView: new SnappsCard.views.DetailView()
});


Ext.apply(this, {
items: [
SnappsCard.views.cardView,
SnappsCard.views.detailView
]
});

SnappsCard.views.Viewport.superclass.initComponent.apply(this,arguments);

}

});






/views/detailView.js

SnappsCard.views.DetailView = Ext.extend(Ext.Panel, {
id: '2',
layout: 'card',



dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
title: 'Card Details',
items: [
{
text: 'Back',
ui: 'back',
handler: function() {
Ext.dispatch({
controller: SnappsCard.controllers.cardsController,
action: 'flipCard',
animation: { type: 'flip'},
page: SnappsCard.views.cardView
})
}

},
{
xtype: 'toolbar',
dock: 'bottom',
layout: { pack: 'center' },
items: [
{
title: 'About',
iconCls: 'info'
}
]

}




]
}],


items: [
{ }
],



initComponent: function () {

console.log('Creating DetailView');



SnappsCard.views.DetailView.superclass.initComponent.apply(this,arguments)
}





});

/views/cardView.js

SnappsCard.views.CardView = Ext.extend(Ext.Panel, {
id: '1',
bodyStyle: "background-image:url(resources/images/bcard.jpg) !important",
layout: 'card',
initComponent: function () {
SnappsCard.views.CardView.superclass.initComponent.apply(this,arguments)
console.log('Creating cardView')


},


listeners: {
el: {
tap: function() {
Ext.dispatch({
controller: SnappsCard.controllers.cardsController,
action: 'flipCard',
animation: {type: 'flip'},
page: SnappsCard.views.detailView
})
}
}

}
});

stefanlaketa
14 Sep 2011, 12:45 PM
Although I don't have that image (I get a blank page), when I click in the browser it flips to the other card displaying a titlebar with the title "Card Details" and a back button.

It seems there's another button too, but that one is empty. In detailView.js, I don't think you can dock a toolbar to the top with a toolbar item in it that's docked to the bottom.

When I click the back button, it flips back to the "empty" page.

So for me, it seems to work.

Perhaps if you also posted your app.js file, we can find the problem.