Array store Sencha Touch 2

Question

While building my first mobile app using sencha touch 2 some questions got in my way and I can't seem to find their answer.

1. Where should an app configuration be stored (theme, language, font size ). I was thinking to count the data from a store and if bigger than 0 work on that data otherwise add data( this would happen only the first time application is opened or localstorage cleared..). There are other options for this kind of thing(things like an array which will be changed when user is interacting with the app) ?

2. I need to use in my application around 100 images. I don't know what options I have here to embed the images into app. Saw lots of examples loading image from external server but not sure if there is an option for packing them with the app.

3. If I had an array with a name(key) and the image url(value), where should this array be ? in a json file and use an ajax load each time a need a name in there ?

Thanks.

Answer 1

Let me suggest few options:

1- App configuration : If app configuration is like set of constant values which won't change by user interaction you can create a file (e.g. properties.js) and load it on application load.

  Properties = {
      SERVICE_URL : 'http://mycompany.com/api',
      PAGE_SIZE : 20
  }

and to load it you just have to edit app.json

"js": [
    {
        "path": "touch/sencha-touch.js",
        "x-bootstrap": true
    },
    {
        "path": "resources/data/properties.js"
    }
]

If you want to control these values then you can keep it on your server and give its URL as "path" in app.json

2- There is always option of packaging images with your app, just like all the icon & startup images are packaged but its not suggested because it increases size of your deployable and people with slow internet connections and low end devices might skip installing it if size it too large.

3- No need to load the JSON file every time you need it, you can cache the data in global variable after first load and keep referring to the array whenever required. Now where to define global variable is another interesting discussion with people suggesting lot of things but I prefer to have a singleton class which can keep all the global functions & variables. See this thread to understand how : Where do I put my global helper functions if they are needed before Ext.application() is being executed?

Answer 2

For Text we can Try like this

   var A_address=Ext.getCmp('address').getValue();  //get the value
    localStorage.setItem("Adult1_select1",A_select1); // assign localstore

     var web_arrayTotalPAssengers=[];
      web_arrayTotalPAssengers.push(localStorage.getItem("web_TotalPassengers"));
     console.log(web_arrayTotalPAssengers);

// push the values in array...

          Ext.Ajax.request({
                                        url:'http:/...........',
                                        method:'POST',
                                        disableCaching: false,
                                        headers: {
                                            'Accept': 'application/json',
                                            'Content-Type': 'application/json'
                                        },
                                        jsonData: {

                            origin:Ext.decode(web_arrayTotalPAssengers), //decode and send

                              }

      success:function(response)
                                        {
                                                    console.log(response);
                                            console.log("Success");
                                        },
                                            failure : function(response) 
                                        {
                                            console.log("Failed");
                                        }