Question

I appreciate the help and support that you all given me to get started with Sencha Touch. Now i got into some complex business scenarios handling, where i feel much more difficulty to deal with it. Here are my business needs.

1. On successful login to the application, the sencha client receives the JSON object response where, all the available products and codes are there. Also, the states tag contains the exclude product list. The JSON format sample i have pasted below.

2. I have to have a form, where i will have to display the states and products drop down box. The UI part is fine. i have done with it. But now the complexity is when i select a state, i have to exclude the list of the products from the total available products.

3. I have used the Ajax request and then decode method to decode the JSON response. Now i have the complete JSON as an Object.

4. I have 2 stores, one for products list and other for states list. I don’t requires any of my store to be sync with server, as it increases data usages.

5. Listener for option control is also done, now how can i manipulate the JSON and update the products Store dynamically. Please suggest.

Here is the sample JSON response:

{   
    "defaultProducts": {
        "product": [
            {
                "code": "pro1",
                "name": "Product AA"
            }, {
                "code": "pro1",
                "name": "Product BB"
            }, {
                "code": "pro1-INP",
                "name": "Product CC"
            }, {
                "code": "uni1-sc",
                "name": "Product DD"
            }, {
                "code": "pro1",
                "name": "Product EE"
            }, {
                "code": "uni1-sc",
                "name": "TCO - Enhanced"
            }, {
                "code": "uni1",
                "name": "Product FF"
            }, {
                "code": "uni1",
                "name": "Product GG"
            }
        ]
    },
    "states": {
        "state": [
            {
                "excludeProducts": {
                    "excludeProduct": [
                        {
                            "code": "pro1",
                            "name": "Product BB"
                        }, {
                            "code": "pro1-INP",
                            "name": "Product CC"
                        }, {
                            "code": "pro1",
                            "name": "Product EE"
                        }, {
                            "code": "uni1",
                            "name": "Product FF"
                        }, {
                            "code": "uni1",
                            "name": "Product GG"
                        }
                    ]
                },
                "code": "AL",
                "name": "Alabama"
            }, {
                "excludeProducts": {
                    "excludeProduct": [
                        {
                            "code": "pro1",
                            "name": "Product BB"
                        }, {
                            "code": "pro1-INP",
                            "name": "Product CC"
                        }, {
                            "code": "pro1",
                            "name": "Product EE"
                        }, {
                            "code": "uni1",
                            "name": "Product FF"
                        }, {
                            "code": "uni1",
                            "name": "Product GG"
                        }
                    ]
                },
                "code": "AK",
                "name": "Alaska"
            }, {
                "excludeProducts": {
                    "excludeProduct": [
                        {
                            "code": "pro1",
                            "name": "Product BB"
                        }, {
                            "code": "pro1-INP",
                            "name": "Product CC"
                        }, {
                            "code": "uni1-sc",
                            "name": "Product DD"
                        }, {
                            "code": "pro1",
                            "name": "Product EE"
                        }, {
                            "code": "uni1-sc",
                            "name": "TCO - Enhanced"
                        }
                    ]
                },
                "code": "AZ",
                "name": "Arizona"
            }, {
                "excludeProducts": {
                    "excludeProduct": [
                        {
                            "code": "pro1",
                            "name": "Product BB"
                        }, {
                            "code": "pro1-INP",
                            "name": "Product CC"
                        }, {
                            "code": "pro1",
                            "name": "Product EE"
                        }, {
                            "code": "uni1",
                            "name": "Product FF"
                        }, {
                            "code": "uni1",
                            "name": "Product GG"
                        }
                    ]
                },
                "code": "AR",
                "name": "Arkansas"
            }
        ]
    },
    "licensedTo": "mycomp.com"
}

Please, guide me any other logic that i could use to implement such complex scenarios.

Answer 1

You should attach listener so the state drop down box and then add filters to the product list depending on the items you want to exclude.

This is how your change listener on the state drop down box should look like:

  listeners: {
        change:function(selectfield, value){
            //here you should get reference to the excludeProduct array
            var exProductArray = [];

            //then add filter to the product store like this
            productStore.clearFilter(false); // clears previous filters

            for(var i=0; i<exProductArray.length;++i){
              productStore.filter("code",exProductArray[i].code);       
            }              
        }
   },

To get reference to the productArray you can set the valueField to the state dropdown list to be the code property and also set the idProperty of the state model to be the code property. Then you can fetch the state record from the states store like this:

  var stateRecord = stateStore.getById(value);

Where value is this value object change:function(selectfield, value){. Then after you get the proper stateRecord to get a reference to the productArray you should just do this:

 var exProductArray = stateRecord.excludeProducts.excludeProduct;