Routes example

[alohainc]

I want to use routes in secha touch 2 application. So it will be very helpful if any body can give simple examples on "how to use routes in sencha touch 2?".

[mitchellsimoens]

Couple of the examples like KitchenSink and TouchStyle use routes.

[wilzdezign]

The guide on History Support/Routes is given at http://docs.sencha.com/touch/2-0/#!/guide/history_support

Though I was just looking myself for simple route so I can direct a user to a specific card/view. So for my example, I did this inside the Controller for that View:

config:{
  routes: {
    'events': 'showCampusEvents'
    // when user types in http://domain.com/#events , function is fired
  }
},

showCampusEvents: function(){
  Ext.ComponentManager.get("mainTabPanel").setActiveItem(2); 
  // after loading of application, controller is fired and changes the
  // view to the Events view
} 

.. I know there must be a cleaner way or set view item based on the View name so incase I need to switch order, I don't have to go through and figure out the number on the tab items

[kostysh]

My demo app contains a good example on how to use routes:
https://github.com/kostysh/Sencha-To...ith-NestedList

[alohainc]

Thank you all, all the examples are very useful...

[CarClub]

I would say you guys do a fair job of describing how to define things in the application and a most lousy job of describing how to use what has been defined.

function button_touched()
{
// need to navigate to a route, how to do it?
// document.location.href = "myroute"; perhaps?
// are routes
}

I have finally figured out the nifty idiom

document.location.href=document.location.href.split('#')[0]+'#user/12345';

or whatever the new route is - which seems to get me what I want.

[tomalex0]

@CarClub,

To redirect you can use

this.redirectTo('user/12345');

http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Controller-method-redirectTo
http://docs.sencha.com/touch/2-0/#!/...hod-redirectTo

[alohainc]

I would say you guys do a fair job of describing how to define things in the application and a most lousy job of describing how to use what has been defined. function button_touched() { // need to navigate to a route, how to do it? // document.location.href = "myroute"; perhaps? // are routes } I have finally figured out the nifty idiom document.location.href=document.location.href.split('#')[0]+'#user/12345'; or whatever the new route is - which seems to get me what I want.

Hey I did it by simply using window.location = "#Login";

[mitchellsimoens]

redirectTo will not only change the hash but will check to see if you have a route handler created for it. If there isn't one then it won't change the hash.

[CarClub]

OK, so how do I put up a route handler that can deal with a form post? I'm missing something here.

form url="#login", method="post"
input name=username,
input name=password,
button, handler=function(){var form = this.up('formpanel'); form.submit(); }

create a route for 'login' : 'doLogin'

Ext.define('MyApp.controller.LoginController', {
extend: 'Ext.app.Controller',
config: {
routes: {
'login': 'doLogin'
},

refs: {
loginForm: {
selector: '#login_form',
xtype: 'formpanel'
}
}
},

doLogin: function() {
var form = Ext.getCmp('login_form');
var values = form.getValues();
this.getApplication().authenticate(values);
}

});

problem being, when doLogin has been called, page has been reloaded and form values are gone.

I want the action triggered from form.submit because it is possible to submit the form from the Android keyboard using the "GO" button.

This is very confusing - want to submit a form to a route via the form.submit action being triggered.