Problem with passing multiple parameters in url with Sencha-touch MVC routing

[parseroo]

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

jQuery.deparam.fragment(params.rest)

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.

[Bucs]

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:

        Ext.dispatch({
            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!

[mhdsherafat]

great to all,
I don't read all of the article but i wrote my controller like this:
Ext.define("app.controller.path.Co",{
extend:"Ext.app.Controller",
config:{
routes:{
'path/pathinner/:id/:dataid/:owner':'insertComment'
}
} ,
insertComment:function(id,dataid,owner){
console.log(id);
console.log(dataid);
console.log(owner);
}
});


and called it like this:
host/#path/pathinner/23/14/18

it works perfectly.