Sencha Touch 2.0动态更改数据存储extraParams

Question

I have 2 selectfields with options connected from data store with JSONP proxy. I need change value in 2nd selectfield based on value selected in first selectfield. For this I think I should change parameters in proxy extraParams based on value selected in selectfield.

I've tried .getProxy() method from this post How can I change/add params on a store but it's does not work. I have an error in console:

Uncaught TypeError: Object function () {
                    return this.constructor.apply(this, arguments);
                } has no method 'getProxy'

See code below with explanations. Any ideas how to do that?

Model:

Ext.define('Providers.model.Provider', {    
extend: 'Ext.data.Model',    
config: {       
   fields: [
        {
            name: 'id',
            type: 'int'
        }, 
        {
            name: 'name',
            type: 'string'
        }
    ]
}
});

1st Store:

Ext.define('Providers.store.ProvidersType', {    
extend: 'Ext.data.Store',
config: {
    model: 'Providers.model.Provider',
    proxy: {
        type: 'scripttag',
        url : 'http://example.com/providers/service.php',
        extraParams: {
            action: 'provider_types',
            username: 'test2',
            callback: '?',                      
            format: 'json'          
        },          
        reader: {
            type: 'json',
            rootProperty: 'providers'
        }
    },      
    autoLoad: true
}
});

2nd store:

Ext.define('Providers.store.Countries', {    
extend: 'Ext.data.Store',
config: {
    model: 'Providers.model.Provider',
    proxy: {
        type: 'scripttag',
        url : 'http://example.com/providers/service.php',
        extraParams: {
            action: 'countries',
            username: 'test2',
            provider_type: 14, //<--- here should be value from first selectfield
            callback: '?',                      
            format: 'json'          
        },          
        reader: {
            type: 'json',
            rootProperty: 'countries'
        },          
    },
    autoLoad: true      
}
});

Layout:

xtype: 'fieldset',
layout: 'vbox',                     
items: [                        
    {
        xtype: 'selectfield',
        id: 'selectType',           
        cls: 'combobox',
        store: 'ProvidersType',
        displayField: 'name',
        valueField: 'id',                           
        listeners: {
            change: function(field, value) {                                    
                if (value instanceof Ext.data.Model) {
                    value = value.get(field.getValueField());
                }
                console.log(value); //<-- get value works fine, how insert it in proxy param? 
                //Providers.store.Countries.getProxy().extraParams.provider_type = 10; <-- Do not work

            }
        }                           
    },                          
    {
        xtype: 'selectfield',   
        id: 'selectCountry',
        placeHolder: 'Country',
        cls: 'combobox',                        
        store: 'Countries',
        displayField: 'name',
        valueField: 'id'                            
    }

]

Thanks.

Answer 1

You can create a new store instance and set its proxy and then reset store of the select field. You can add this code to your listener function:

newstore = Ext.create('Providers.store.Countries', {});
newstore.setProxy(
    {
        type: 'scripttag',
        url : 'http://example.com/providers/service.php',
        extraParams: {
            action: 'countries',
            username: 'test2',
            provider_type: value,
            callback: '?',                      
            format: 'json'          
        },          
        reader: {
            type: 'json',
            rootProperty: 'countries'
        },          
    }
);
newstore.load();

countrySelection = Ext.getCmp('selectCountry');
countrySelection.setStore(newstore); 
//OR: countrySelection.store = newstore;