0

I'am adding content to my application viewport like this:

Ext.Viewport.animateActiveItem(item, {transition})

I'am searching for a way to get "back" to the last view. Is that possible, or does the viewport destroy the last view?

2
  • You should use a NavigationView Aug 14, 2012 at 12:27
  • Not a good idea, because this control is very inflexible (it always creates a titlebar?). We are creating our sencha-apps/guis very dynamicly based on an xml-definition, so it's not "predictable" if the view needs a titlebar or not e.g.
    – Marc
    Aug 14, 2012 at 12:41

3 Answers 3

2

Why not just use the built in history support? You can add an entry to the history object like so:

this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
    url: 'dashboard'
}));

Once you call that function, it will change the application's URL hash. You can grab the event by using routes in your controller... add it to the config like so:

config: {
    routes: {
       'dashboard': 'showDashboard'
    },
    control: {
       //controls...
    }
},

Sencha Touch will recognize the URL change and look to your routes to call a function like so:

showDashboard: function() {
    Ext.Viewport.animateActiveItem(item, {transition});
},

Using this method, the native back button will take you back to the previous view, you can also call which view you want to go to etc... view the documentation on the history object here: http://docs.sencha.com/touch/2-0/#!/api/Ext.app.History

1
  • Hmmm, that would require some additional informations in our xml, because I need to define the routes somewhere. Thank you for the hint, I will think about it.
    – Marc
    Aug 16, 2012 at 7:11
1

Why don't you use the Ext.Viewport.animateActiveItem() on your first panel then ?

I did it here : http://www.senchafiddle.com/#xTZZg

Hope this helps

3
  • Yes, of course that would be easy and it was my first idea. The problem atm is to keep a reference of the last view, because we are building a application with a very dynamic approach and it is not predictable what the next view will be or what the last view was. My hope was that there would be an easy way to just switch back to the last view. What is happening if I add new content with animateActiveItem()? Does it destroys the old content?
    – Marc
    Aug 14, 2012 at 19:05
  • 2
    Then instead of adding them directly to the Viewport, just create a container with a card layout and add your views to this container. Then you can easily switch to the last view by getting the active index by getting the number of items in your card container (activeItem=container.getItems().length) and activate the last view by calling container.setActiveItem(activeItem-1). OR you can also use a Carousel which let you go to the next or previous view easily OR use a navigation view and hide the titlebar (with CSS) Aug 14, 2012 at 19:49
  • Can I mix a tabpanel and carousel?
    – Marc
    Aug 15, 2012 at 10:27
0

Ext.app.Action is a private Sencha class so cannot be guaranteed to exist in future releases. A better way is replace ...

this.getApplication().getHistory().add(Ext.create('Ext.app.Action', {
    url: 'dashboard'
}));

with this ...

this.getApplication().redirectTo('dashboard');

You can also pass a Model object provided it implements a toUrl() method ...

this.getApplication().redirectTo(myModelObj);

If required, you can now just use the following to go back:

history.back();

Refer to the Touch History Guide:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.