Hybrid View

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Answers
    1
    Vote Rating
    0
    michaelreneer is on a distinguished road

      0  

    Default Answered: Stores and an asp.net web service

    Answered: Stores and an asp.net web service


    New to Ext JS so please forgive me if this is a simple question. I am having difficulty getting a json response back from my asp.net web service. I have searched here on the forums and on stack overflow and have tried a few things, but have been unsuccessful. The below Ajax request returns the expected result in the responceText property of the response:

    Code:
    Ext.Ajax.request({
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        method: 'POST',
        params: Ext.JSON.encode({
            id: '',
            token: '',
            filter: ''
        }),
        url: 'http://...service.asmx/GetThings',
        
        success: function(response, options) {
            console.log(response);
        }
    });
    I am trying to load the array of things into a List object and all of the examples here in the docs use a store for this. I have been unable to get a useful response from the server using a store:

    Code:
    Ext.define('app.store.Things', {
        autoLoad: true,
        extend: 'Ext.data.Store',
        model: 'app.model.Thing',
        proxy: {
            actionMethods: {
                create: 'POST',
                read: 'POST',
                update: 'POST',
                destroy: 'POST'
            },
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            reader: {
                type: 'json',
                root: 'd'
            },
            extraParams: {
                id: '',
                token: '',
                filter: ''
            },
            type: 'ajax',
            url: 'http://...service.asmx/GetThings',
        }
    });
    I am using safari to load the application and in the error console I am getting the response:

    Code:
    POST http://...service.asmx/GetThings 500 (Internal Server Error)
    I can confirm that I need to use a POST method not a GET method for the web service, and that I needed to specifically set the content-type of the request or the web service would not know to give the response back in JSON.

    How should I get my my store working? Or should I not be using a store?

    Thanks for any help

  2. Ok I was able to finally get everything working. After trying a combination of the above suggestions. First my store:

    Code:
    Ext.define('app.store.Things', {
    	extend: 'Ext.data.Store',
    	model: 'app.model.Thing',
    	proxy: {
    		actionMethods: {
    			create: 'POST',
    			read: 'POST',
    			update: 'POST',
    			destroy: 'POST'
    		},
    		headers: {
    			'Content-Type': 'application/json; charset=utf-8'
    		},
    		reader: {
    			type: 'json',
    			root: 'd'
    		},
    		type: 'ajax',
    		url: 'http://...service.asmx/GetThings',
    	}
    });
    A couple of things to note:
    1) The stores autoLoad property is not set, thus defaulting to false.
    2) I didn't need to set any of the xyzparam properties to undefined.
    3) I didn't need to set the writer property.

    Then you need to call the load method on the store and encode the parameters. In my example this was in the controllers init method:

    Code:
    Ext.define('app.controller.Thing', {
    	extend: 'Ext.app.Controller',
    	models: ['Thing'],
    	stores: ['Things'],
    	...
    	init: function(application) {
    
    		...
    		this.getThingsStore().load({
    			params: Ext.JSON.encode({
    				id: '',
    				token: '',
    				filter: ''
    			})
    		});
    	}
    });
    A couple of thoughts:
    1) It seems like setting the writer to 'json' should have solved the problem by my interpretation of the documentation. Is this true? And if so should I file a bug? And where? Sorry for being new to the forums
    2) I could not find documentation on passing parameters like you suggested into the load method. Is this because this is a deprecated property on the Ext.data.Operation object? Or is the documentation not complete?
    3) Should I mark this post as the most correct answer as it is the most complete, or should I mark the suggestion above as the correct one that lead me to the solution? I am not sure if you are supposed to mark your own posts as the answer.

    Again, thank you very much for all the help.

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Well an Internal Server Error is on the server side. There is some runtime error in your code there.

    Maybe some formvariables are not found in the code or it can be everything else. In what language is the webservice coded in. VB, C#? You can see in firebug what kind of request it makes to the server.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Answers
    1
    Vote Rating
    0
    michaelreneer is on a distinguished road

      0  

    Default


    Web services are coded in c#.

    I figured it couldn't be on the server side, because not only does the Ajax request work, but the web service works in production with my objective-c http requests.

  5. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    and take away that komma

    type: 'ajax',
    url: 'http://...service.asmx/GetThings', <--

    so try this

    Code:
    Ext.define('app.store.Things', {
        autoLoad: true,
        extend: 'Ext.data.Store',
        model: 'app.model.Thing',
        proxy: {
            actionMethods: {
                create: 'POST',
                read: 'POST',
                update: 'POST',
                destroy: 'POST'
            },
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            reader: {
                type: 'json',
                root: 'd'
            },
            extraParams: {
                id: '',
                token: '',
                filter: ''
            },
            type: 'ajax',
            url: 'http://...service.asmx/GetThings'
        }
    });

  6. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Answers
    1
    Vote Rating
    0
    michaelreneer is on a distinguished road

      0  

    Default


    Didn't fix the problem and I am getting the same error.

    I was messing around with setting the XYZparams properties to null to see if I could get the proxy/store to work and forgot to delete the comma after.

  7. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    What if you put the proxy in the config?

    Code:
    Ext.define('app.store.Things', {
        autoLoad: true,
        extend: 'Ext.data.Store',
        model: 'app.model.Thing'    
    });
    
    Ext.create({
       proxy: {
            actionMethods: {
                create: 'POST',
                read: 'POST',
                update: 'POST',
                destroy: 'POST'
            },
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            reader: {
                type: 'json',
                root: 'd'
            },
            extraParams: {
                id: '',
                token: '',
                filter: ''
            },
            type: 'ajax',
            url: 'http://...service.asmx/GetThings'
        }
    });

  8. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Answers
    1
    Vote Rating
    0
    michaelreneer is on a distinguished road

      0  

    Default


    First, thanks for all the help. Trying what you suggested...

    For my View:

    Code:
    Ext.define('app.view.thing.List', {
    	config: {
    		layout: 'fit'
    	},
    	extend: 'Ext.Container',
    	
    	initComponent: function() {
    		console.log("app.view.thing.List: init component");
    		
    		var store = Ext.create('app.store.Things', {
    			proxy: {
    				actionMethods: {
    					create: 'POST',
    					read: 'POST',
    					update: 'POST',
    					destroy: 'POST'
    				},
    				headers: {
    					'Content-Type': 'application/json; charset=utf-8'
    				},
    				reader: {
    					type: 'json',
    					root: 'd'
    				},
    				extraParams: {
    					id: '',
    					token: '',
    					filter: ''
    				},
    				type: 'ajax',
    				url: 'http://...service.asmx/GetThings'
    			}
    		})
    		
    		var toolbar = Ext.create('Ext.Toolbar', {
    			docked: 'top',
    			title: 'Things'
    		});
    		
    		var list = Ext.create('Ext.List', {
    			itemTpl: '{name}',
    			store: store
    		});
    		
    		this.add([
    			toolbar,
    			list
    		]);
    		
    		this.callParent();
    	}
    });
    For the store, like you suggested:

    Code:
    Ext.define('app.store.Things', {
    	autoLoad: true,
    	extend: 'Ext.data.Store',
    	model: 'app.model.Thing'
    });
    I am getting 2 errors now:

    Code:
    TypeError: 'undefined' is not an object (evaluating 'b.indexOf')
    POST http://...service.asmx/GetThings 500 (Internal Server Error)
    When I set the model's autoLoad property to false, and called the load() method on the store after I assigned the lists store property I was able to remove the TypeError. But I am ultimately still getting the same server error.

    I am going to once again reiterate that I have no problem using the Ajax request to call the server and calling the server with other frameworks works as expected as well. Thanks again for all your suggestions, do you have any other ideas?