PDA

View Full Version : Animation with Sencha MVC



jonwane27
11 Feb 2011, 8:23 AM
I am trying to setup a small application similar to the twitter sample with Sencha MVC Platform. I am having trouble with the sub panels reversing the slide animation. The Viewport is setup very similarly with a cardSwitchAnimation. The Home renders the button to go to Screen 1 and the slide happens properly to the left. However, when I try to put a back button on Screen 1 and animate the slide to the right, it doesn't work.

Viewport.js
Views.Viewport = Ext.extend(Ext.Panel, {
id: 'viewport'
, layout: 'card'
, fullscreen: true
, cardSwitchAnimation: 'slide'

, initComponent: function() {
Views.Viewport.superclass.initComponent.apply(this, arguments);
}
});

Home.js
Views.Home = Ext.extend(Ext.Panel, {
initComponent: function() {
this.dockedItems = [
{
dock: 'top'
, xtype: 'toolbar'
, title: 'Home'
}
];
this.items = [
{
xtype: 'button'
, ui: 'round'
, text: 'Screen 1'
, flex: 1
, margin: '20 20 0 20'
, handler: function() {
Ext.redirect('main/screen1');
}
}
];
Views.Home.superclass.initComponent.apply(this, arguments);
}
});

Screen1.js
Views.Screen1= Ext.extend(Ext.Panel, {
initComponent: function() {
this.dockedItems = [
{
dock: 'top'
, xtype: 'toolbar'
, title: 'Screen 1'
, items: [
{
text: 'Home'
, ui: 'back'
, handler: function() {
//Ext.redirect('main/home');
Ext.dispatch({
controller: 'main'
, action: 'home'
, animation: { type: 'slide', direction: 'right' }
});
}
}
]
}
];
this.items = [
{
xtype: 'panel'
, html: 'Screen 1'
}
];
Views.Screen1.superclass.initComponent.apply(this, arguments);
}
});