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?

  9. #8
    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


    I am using safari to load the application
    Then you are on Apple. On apple you can install firefox and firebug. Plz do that, and give me the request that is send to the server. I can not figure out what's the problem now. You need a program like firebug anyway to work with ExtJs.

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

      0  

    Default


    Awesome, great idea, here are the request header for the two requests:

    This one does not work

    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',
        }
    });
    Gives

    Code:
    Request URL:http://...service.asmx/GetThings
    Request Method:POST
    Status Code:500 Internal Server Error
    
    
    Request Headers
    Content-Type:application/json; charset=UTF-8
    Origin:file://
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.51.22 (KHTML, like Gecko) Version/5.1.1 Safari/534.51.22
    X-Requested-With:XMLHttpRequest
    
    
    Request Payload
    id=&token=&filter=&page=1&start=0&limit=25
    
    
    Response Headers
    Cache-Control:private
    Content-Length:91
    Content-Type:application/json; charset=utf-8
    Date:Mon, 07 Nov 2011 21:49:55 GMT
    jsonerror:true
    Server:Microsoft-IIS/7.5
    X-AspNet-Version:4.0.30319
    X-Powered-By:ASP.NET
    And...

    This one does work

    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);
        }
    });
    Gives

    Code:
    Request URL:http://...service.asmx/GetThings
    Request Method:POST
    Status Code:200 OK
    
    
    Request Headers
    Content-Type:application/json; charset=UTF-8
    Origin:file://
    User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.51.22 (KHTML, like Gecko) Version/5.1.1 Safari/534.51.22
    X-Requested-With:XMLHttpRequest
    
    
    Request Payload
    {"id":"","token":"","filter":""}
    
    
    Response Headers
    Cache-Control:private, max-age=0
    Content-Length:15664
    Content-Type:application/json; charset=utf-8
    Date:Mon, 07 Nov 2011 21:49:55 GMT
    Server:Microsoft-IIS/7.5
    X-AspNet-Version:4.0.30319
    X-Powered-By:ASP.NET

    So it seems when I am using the proxy I am not encoding the extraParams properly as json and we are getting a couple of extra params as well (i.e. page, start, and limit). I have tried to set the pageParams, startParams, and limitParams properties to undefined as the docs say and I have also tried specifying the writer property to json. Neither worked.

    Should I be using a different type of proxy for this task?

  11. #10
    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 why don't try to do first the same with the store

    extraParams: Ext.JSON.encode({
    id: '',
    token: '',
    filter: ''
    }),

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi