sencha touch :: dynamically create panels for viewport

Question

I have a MVC-styled sencha touch app and normally I used

Ext.apply(app.views, {
            loginPage: new app.views.Login(),
            mainView: new app.views.MainView(),
            ...
}
Ext.apply(this, {
            items: [
                app.views.loginPage,
                app.views.mainView
...

to create the app panels.

but now I want to start with a single viewport panel and add a new content panel dynamically, destroying the old one (in this case the login panel) after the slide action to keep the DOM small and clean.

how could I do that? how could I create and add the next panel lets say after login was successful, inside the logincontroller.

headkit headkit · Accepted Answer · 2012-01-27T10:25:19

I did it with

app.views.viewport.setActiveItem(
    app.views.loginPage = new app.views.Login(), {type:'slide',direction:'right'}
}

to create the new page on the fly and

this.on('cardswitch', function(scp, newCard, oldCard, indx, anim){
    oldCard.destroy();
}

inside the Viewport!

sencha touch :: dynamically create panels for viewport

1 Answers