How to handle multipleparams in dynamic way

Question

How to handle multipleparams in dynamic way.

I have routing with multiple params like this.

routes: {
        'home/:id': 'onHomeId',
        'home/:id/:param1': 'onHomeId',
        'home/:id/:param1/:param1Value': 'onHomeId',
        'home/:id/:param1/:param1Value/:param2/:param2Value': 'onHomeId',
        'home/:id/:param1/:param1Value/:param2/:param2Value/:param3/:param3Value': 'onHomeId',
        'home/:id/:param1/:param1Value/:param2/:param2Value/:param3/:param3Value/:param4/:param4Value': 'onHomeId',
        
    }

Instead of writing this much I want some dynmic way to generated because params can grow.

so here is what i am trying.

onHomeId : function(){
    let _this = this,
        hashValue = location.hash,
        params =  location.hash.split("/");
        
    /* code where i am using params */
}

I am taking whole url and braking this and then working on that

can anybody explain me what the best I can do.

Answer 1

ExtJS Router is not really meant for passing variable number of parameters, like a URL query string. ExtJS Router can be used to keep track of your application's state and store it in the browser history, so your users can navigate back and forward, and link into specific parts of your application, like it were not a Single Page Application.

The method that you specify for a route will get all parameters from the route, in that order. So route home:/param1 needs function(param1), route home:/param1/:param2 a function(param1, param2) etc. These are not key-value pairs, like ?param1=1&param2=2. You can use them like yourdomain.com#home/1/2, and the function handling this route will receive 1 and 2 as parameters, in that order, you can't specify parameter names in the route.

There is a possibility to set routes dynamically, not in the class declaration, using setRoute method of the controller, and execute it when your application is initialised. But it won't really help you, because you would still need functions with 1,2,3 etc. parameters.

So you have two options, as far as I understand:

1. Use only one parameter for your route, like home/:myallparams, and in the function(myallparams) you can try to separate its parts. But you can easily get into troubles with special characters and I don't really recommend this approach.
2. You can use traditional URL query string in your ExtJS application and use the Router only for the basic routes. Assuming the usual format of ?param1=1&param2=2 in your URL you can use the following code to extract the parameters in your ExtJS code:

var queryString = window.location.href.split('?')[1];
if (queryString) {
    var queryObject = Ext.Object.fromQueryString(queryString);

    // check for specific parameters
    if (queryObject.param1) {
        // do something with queryObject.param1
    }
    if (queryObject.param2) {
        // do something with queryObject.param2
    }
}