PDA

View Full Version : Problem sending params or filters with ajax proxy



Gozer
17 Jun 2011, 10:52 AM
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
19 Jun 2011, 9:11 AM
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
19 Jun 2011, 10:32 AM
county_store.load({
params:{
'method':'getCountyList'
}
});

Gozer
19 Jun 2011, 6:38 PM
Thank you! That's a lot cleaner.