1. #1
    Sencha User
    Join Date
    Oct 2007
    Posts
    60
    Vote Rating
    0
    Gozer is on a distinguished road

      0  

    Default Problem sending params or filters with ajax proxy

    Problem sending params or filters with ajax proxy


    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)

    Code:
    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
    PHP Code:
    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(); 

  2. #2
    Sencha User
    Join Date
    Oct 2007
    Posts
    60
    Vote Rating
    0
    Gozer is on a distinguished road

      0  

    Default


    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.

    Code:
    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...

    Code:
    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.

  3. #3
    Touch Premium Member
    Join Date
    Sep 2008
    Location
    Orange County, CA, USA
    Posts
    186
    Vote Rating
    0
    Jack9 is on a distinguished road

      0  

    Default Params

    Params


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

  4. #4
    Sencha User
    Join Date
    Oct 2007
    Posts
    60
    Vote Rating
    0
    Gozer is on a distinguished road

      0  

    Default


    Thank you! That's a lot cleaner.

Thread Participants: 1

Tags for this Thread