Problem sending params or filters with ajax proxy

[Gozer]

I doesn't seem clear how to change a proxy's remote call on an existing store. My example starts with a list of states. When a state is tapped, I need to send the name of that state to the server in the ajax call so I get a list of counties returned only from that state. I come from ExtJS 3.x world where I have params I can set. I see in Touch there are filters in the stores, but I'm not sure that's really what I want and I get errors when I try.

My example below reproduces the issue I'm having. Its seems if I do finally use filters I will have to construct the URL the way I want. I'd like to end up with a call that looks like this:

api.php?method=getCountyList&state=Pennsylvania

I'm open to suggestions. Any help would be appreciated.

About half way down you'll see where I'm trying to handle the itemtap on the State list (app.views.Select_State_View)

new Ext.Application({
	name: 'app',

	launch: function() {
		this.viewport = new app.Viewport();
    }
});

// MODELS ======

Ext.regModel('State_Model', {
    fields: [{name: 'name',	type: 'string'}]
});

Ext.regModel('County_Model', {
    fields: [{name: 'name',	type: 'string'}]
});

// STORES ======

Ext.regStore('State_Store', {
    model: 'State_Model',
    autoLoad: true,
    proxy: {
    	type: 'ajax',
    	url: 'api.php?method=getStateList',
        reader: {
        	type: 'json',
            root: 'items'
        }
    }
});

Ext.regStore('County_Store', {
    model: 'County_Model',
    autoLoad: false,
    remoteFilter: true,
    proxy: {
    	type: 'ajax',
    	url: 'api.php?method=getCountyList',
        reader: {
        	type: 'json',
            root: 'items'
        }
    }
});

// VIEWS ======

app.views.Select_State_View = Ext.extend(Ext.Panel, {
	layout: 'fit',

	initComponent: function() {
		app.views.Select_State_View.superclass.initComponent.apply(this, arguments);
    },
    
    items: [{
        xtype: 'list',
        store: 'State_Store',
        itemTpl: '{name}',
		listeners: {
			itemtap: function(data_view, index, item, event){
				state = data_view.getStore().getAt(index).get('name');

				// The API docs seems to say this will work, but error occurs:
				// Object #<Object> has not method filter
				app.stores.county_store.filter('state', state);

				// I've tried this too, but no luck
				app.stores.county_store.load({url: 'api.php?method=getCountyList&state=' + state});

			}
		}
    }]
});

Ext.reg('Select_State_View', app.views.Select_State_View);

app.views.Select_County_View = Ext.extend(Ext.Panel, {
	layout: 'fit',

	initComponent: function() {
		app.views.Select_County_View.superclass.initComponent.apply(this, arguments);
    },
    
    items: [{
    	id: 'Select_County_List',
        xtype: 'list',
        store: 'County_Store',
        itemTpl: '{name}',
		listeners: {
			itemtap: function(data_view, index, item, event){
				alert(data_view.getStore().getAt(index).get('name'));
			}
		}
    }]
});

Ext.reg('Select_County_View', app.views.Select_County_View);

app.Viewport = Ext.extend(Ext.Panel, {
	layout : 'card',
	fullscreen : true,

	initComponent : function() {

		app.stores.county_store = {
			xtype : 'County_Store',
			itemId : 'county_store'
		};

		Ext.apply(app.views, {
			select_state_view : {
				xtype : 'Select_State_View',
				itemId : 'select_state_view'
			},
			select_county_view : {
				xtype : 'Select_County_View',
				itemId : 'select_county_view'
			}
		});

		Ext.apply(this, {
			items : [
				app.views.select_state_view,
				app.views.select_county_view
			]
		});

		app.Viewport.superclass.initComponent.apply(this, arguments);
	}
});

api.php

class Api
{

    public static function routeRequest()
    {
        switch ($_GET['method'])
        {
            case 'getCountyList':
                $result = self::getCountyList($_REQUEST);
                break;

            case 'getStateList':
                $result = self::getStateList($_REQUEST);
                break;
        }

        echo json_encode($result);
        exit();
    }

    protected static function getCountyList($request)
    {
        $county_list['New York']        = array('Genese','Orleans','Wayne');
        $county_list['Pennsylvania']    = array('Centre','Monroe','Pike');

        $result['success'] = TRUE;

        $result['items'] = $county_list[$request['state']];

        return $result;
    }

    protected static function getStateList($request)
    {
        $result['success'] = TRUE;

        $result['items'][] = array('name' => 'New York');
        $result['items'][] = array('name' => 'Pennsylvania');

        return $result;
    }
}

Api::routeRequest(); 

[Gozer]

I don't like it, but I had to set a new proxy and load the store each time the state changes. There has to be a better way.

itemtap: function(data_view, index, item, event){
	state = data_view.getStore().getAt(index).get('name');

	county_store.setProxy({
		type: 'ajax',
		url: 'api.php?method=getCountyList&state=' + state,
		reader: {
			type: 'json',
			root: 'items'
		}
	});
	county_store.load();
}

I also had to create an instance of the County_Store seemingly bypassing whatever the app MVC is supposed to be doing...

var county_store = new Ext.data.Store({
    model: 'County_Model',
    autoLoad: false,
    remoteFilter: true,
    proxy: {
    	type: 'ajax',
    	url: 'api.php?method=getCountyList',
        reader: {
        	type: 'json',
            root: 'items'
        }
    }
});

I'm still open to suggestions, but I had to opt for progress over whatever art was intended for the new app organization.

[Jack9]

 county_store.load({
    params:{
        'method':'getCountyList'
    }
});

[Gozer]

Thank you! That's a lot cleaner.