1. #11
    Ext JS Premium Member
    Join Date
    Apr 2010
    Vote Rating
    parseroo is on a distinguished road



    I am pretty sure any pattern will work as well, although I do normally use generic routing for everything but the root route.

    Any additional parameters are shoved into 'rest' as a string, so I used
    to parse the additional parameters. You could use something simpler [maybe parseuri.js] without pulling in jQuery, but I have jQuery around to fix DOM issues 'concisely' and for some useful widgets, so I just used a method available.

    I ultimately ended up not caring about more complex URLs on the client side, so I definitely have not verified the extra parameters work with history. The code doesn't get in the way of history for me, but I could certainly imagine some other quirk in the code base that did when extra parameters were introduced... although that would be

    If you care, I now just send the extra parameters to the server on first application hit (potentially even the deep link hit) and they stay active for the entire session. Not as nice as just turning a flag on/off, better sub-page control, or a deep-linked sort adjustment, but I don't need the extra right now.

  2. #12
    Sencha Premium Member
    Join Date
    Sep 2008
    Vote Rating
    Bucs is on a distinguished road



    Thanks @parseroo for the response.

    Actually, I combined both your's and @gcallaghan's input into a very workable solution that handles parameter passing, deep linking, and history support in a very acceptable manner. I tend to agree more with @gcallaghan when it comes to the URL structure using a true URL pathing scheme for the parameters b/c in my opinion it is much more intuitive to the user (or client) to look at and work with. I also agree with him when it comes to using Ext.override when it comes to altering the core functionality as it keeps your original source code intact and lets you upgrade without having to search through all the code and rewrite it again in a new version.

    With that said, your override is still needed to fix the oversight (bug) in the router functionality so that the parameters following the action don't get shaved off. I had to add "\\-" to account for dashes in the productId, but your code made that trival.

    So, here's what I ended up with for my overrides that included your code:
    Ext.override(Ext.util.Route, {
        createMatcherRegex: function (url) {
            var paramsInMatchString = this.paramsInMatchString,
                    length = paramsInMatchString.length,
                    i, cond, matcher;
            for (i = 0; i < length; i++) {
                cond = this.conditions[paramsInMatchString[i]];
                if (i == length - 1) {
                    matcher = Ext.util.Format.format("({0})", cond || "[%a-zA-Z0-9\\_\\s,\\&\\=\\-]+");
                } else {
                    matcher = Ext.util.Format.format("({0})", cond || "[%a-zA-Z0-9\\_\\s,]+");
                url = url.replace(new RegExp(paramsInMatchString[i]), matcher);
            return new RegExp("^" + url + "$");

    My routes.js file looks like this:
    Ext.Router.draw(function (map) {
        // HomeController
        map.connect("home/index", { controller: 'HomeController', action: 'index' });
        // ProductsController
        map.connect("products/list/:method/:category/:term", { controller: 'ProductController', action: 'list' });
        map.connect("products/show/:productId", { controller: 'ProductController', action: 'show' });
    My Dispatch commands do two things, they build the historyUrl in accordance with the above routes, and they also pass the parameters as properties of the options config object. Doing this seems to ensure that the necessary parameters are included in the options object whether I am using the dispatch command, directly pathing to a page (deep linking), or using the history object (by using the browser forward and back buttons). It also allows me to use history.go(-1) for any back button (like on the toolbar) to return to the previous page very easily.

    Here's the dispatch code for the Product List action:
                controller: 'ProductController',
                action: 'list',
                historyUrl: 'products/list/' + method + '/' + category + '/' + term,
                parentView: 'Index',
                method: method,
                category: category,
                term: term
    As I stated, with the above code, I get parameter passing, deep linking, and history support in an easy to use, intuitive fashion...so thanks for your help!

  3. #13
    Sencha User
    Join Date
    Oct 2012
    Vote Rating
    mhdsherafat is on a distinguished road


    Default What is this?

    great to all,
    I don't read all of the article but i wrote my controller like this:
    } ,

    and called it like this:

    it works perfectly.

Similar Threads

  1. Sencha Touch + MVC?
    By Bucs in forum Sencha Touch 1.x: Discussion
    Replies: 16
    Last Post: 2 Jul 2011, 12:19 PM
  2. Using Sencha Touch with ASP .Net MVC
    By atulbahl in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 24 Mar 2011, 12:33 PM
  3. Sencha Touch's MVC
    By Steffen Hiller in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 27 Nov 2010, 8:24 PM
  4. Sencha Touch MVC
    By crysfel in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 25 Nov 2010, 12:36 AM
  5. change store URL or passing parameters
    By Brendan in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 28 Jan 2009, 6:04 PM

Thread Participants: 7

Tags for this Thread