Question

Can some one tell me how to pass data from controller to a data store in sencha touch.

view code

var select = new Ext.form.Select({
    id:'selectCity',
    store: parking.stores.city,
    displayField: 'Name',
    valueField: 'Name',
    placeHolder: 'Choose City',
    cls:'select'
});

var citySearchButton = new Ext.Button({
    cls: 'citySearch',
    text: 'Search',
    handler: function () {
        Ext.dispatch({
            controller: parking.controllers.controller,
            action: 'showMapBasedOnCity',
            id: Ext.getCmp('selectCity').getValue()
        });
    }
});

from my view i am able to pass the value to the controller.

 showMapBasedOnCity: function (options) {
        var city = options.id;
        //var data = parking.stores.parkingFacilityByCity.setId(city);
        // parking.views.map.addMap(city);
        parking.views.viewport.setActiveItem(
            parking.views.map, options.animation
        );

    },

The problem is how to pass the value from here to the data store : I need the parameter from controller (the city value) to pass to my jsonp query to get the desired result back).

parking.stores.parkingFacilityByCity = new Ext.data.Store({
    model: 'PF',
    proxy: Ext.util.JSONP.request({
        url: 'http://parking.511.org/index/M_GetParkingFacilityByCity',
        callbackKey: 'callback',
        parmas: { city: },
        scope: this,
        callback: function (data) {
            var list = data.Root;
            parking.stores.parkingFacilityByCity.loadData(data.Root);
        }
    })
});

Any help would be greatly appreciated.

Thanks,
Pawan

Answer 1

In my Form on button click i get the value from and pass it on to the dispatch method. In the dispatch method i call the controller.

var select = new Ext.form.Select({
    id:'selectCity',
    store: parking.stores.city,
    displayField: 'Name',
    valueField: 'Name',
    placeHolder: 'Choose City',
    cls:'select'
});

var citySearchButton = new Ext.Button({
    cls: 'citySearch',
    text: 'Search',
    handler: function () {
        Ext.dispatch({
            controller: parking.controllers.controller,
            action: 'showMapBasedOnCity',
            id: Ext.getCmp('selectCity').getValue()
        });
    }
});

In the controller i call the method get parking facility by city which get the new data into the store.

  showMapBasedOnCity: function (options) {
        var city = options.id;
        getParkingFacilityByCity(city);
     //   parking.views.map.addMap();
        parking.views.viewport.setActiveItem(
            parking.views.map, options.animation
        );

Data.js file

parking.stores.parkingFacilityByCity = new Ext.data.Store({
    model: 'PF',
    autoload: true
});

var getParkingFacilityByCity = function (cityName) {
    Ext.util.JSONP.request({
        url: 'http://parking.511.org/index/M_GetParkingFacilityByCity',
        callbackKey: 'callback',
        params: { city: cityName },
        callback: function (data) {
            parking.stores.parkingFacilityByCity.loadData(data.Root);
        }
    });
};

Hope this helps some one. There may be other methods too. But this is the one which worked for me pretty well.