PDA

View Full Version : Sencha Touch - Ext.AJAX.request - Continous Loading



smussani
20 Sep 2011, 7:06 AM
I was able to figure out how to load an Ext.data.store using a static .json file. What I am trying to do now is to populate the store using the results (JSON String) from an AJAX call to .NET Web Service which returns the JSON string. I have checked the response back from my call and I see the correct JSON string. My doubts are on the "data: buglist" portion of my code below.


var buglist;
Ext.setup({
onReady: function () {
Ext.Ajax.request({
url: 'http://sencha.mussanisoft.com/webservice/service.asmx/GetBugsSerialized',
method: 'POST',
headers: { 'Content-Type': 'application/json;charset=utf-8' },
failure: function (response, opts) {
alert("fail: " + response.responseText);
},
success: function (response, opts) {
alert("success: " + response.responseText);
buglist = Ext.decode(response.responseText);
}
});

Ext.regModel('bugs', {
fields: ['bg_id', 'bg_short_desc', 'bg_reported_date']
});



var bugList = new Ext.DataView({
store: new Ext.data.Store({
model: 'bugs',
autoLoad: true,
proxy: {
type: 'ajax',
data: buglist,
reader: {
type: 'json',
root: 'd'
}
}
}),
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="item">',
'<p>{bg_id}</p>',
'<p>{bg_short_desc}</p>',
'</div>',
'</tpl>'
),
itemSelector: 'div.item',
fullscreen: true

});
}
});My JSON string from .NET call:


{"d":"[{\"bg_id\":3,\"bg_short_desc\":\"Reports - Efficiency - time from order to shipment\",\"bg_reported_date\":\"\\/Date(1261593513930)\\/\"},{\"bg_id\":5,\"bg_short_desc\":\"Remove SKU 375906\",\"bg_reported_date\":\"\\/Date(1262199215067)\\/\"}]"}

Problem with the code above is that I only get a continuous "Loading" graphic
Sajjad

AndreaCammarata
20 Sep 2011, 7:46 AM
Hi smussani.
You have several errors in your code.
First, your are trying to make an AjaxRequest and then you are trying to fill immediately the store with the retrived data.
But: AjaxRequest is async, so it requires time to be completed, for this reason, when your dataview is rendered, you don't have your data yet.
However, even if this where not true, you should set your store proxy type as "memory" and not "ajax".

However, why don't you retrive your data directly from the store setting an "ajax" proxy?

Hope this helps.

smussani
20 Sep 2011, 7:51 AM
Thanks.. Makes sense now :)

Can you help me with some code on to set the ajax proxy for a call to .asmx web service?
Sajjad

smussani
20 Sep 2011, 2:51 PM
I have modified the code to now use Proxy with ajax. The problem is that the JSON string returned from .asmx call is serialized. When my page loads, I get a blank page with the error in Google Chrome inspector as:
Viewport argument value "device-width;" for key "width" not recognized. content ignored

Here is the updated code:


var buglist;
Ext.setup({
onReady: function () {
Ext.regModel('bugs', {
fields: ['bg_id', 'bg_short_desc', 'bg_reported_date']
});


var bugList = new Ext.DataView({
store: new Ext.data.Store({
model: 'bugs',
autoLoad: true,
proxy: {
url: 'http://sencha.mussanisoft.com/webservice/service.asmx/GetBugsSerialized',
type: 'ajax',
limitParam: null,
headers: { 'Content-Type': 'application/json;charset=utf-8'},
reader: {
type: 'json',
root: 'd'
},
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
}
}
}),
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="item">',
'<p>{bg_id}</p>',
'<p>{bg_short_desc}</p>',
'</div>',
'</tpl>'
),
itemSelector: 'div.item',
fullscreen: true


});
}
});

erhandemirci
6 Feb 2012, 8:00 AM
I'm writing the above code. firebug show as following. generated link true but why link be red color in firebug? why not response?

my project file :http://uploading.com/files/a8db5746/webservismyapp.zip/


31400


my code


var buglist;
Ext.setup({
onReady: function () {
Ext.regModel('bugs', {
fields: ['bg_id', 'bg_short_desc', 'bg_reported_date']
});




var bugList = new Ext.DataView({
store: new Ext.data.Store({
model: 'bugs',
autoLoad: true,
proxy: {
url: 'http://sencha.mussanisoft.com/webservice/service.asmx/GetBugsSerialized',
type: 'ajax',
limitParam: null,
headers: { 'Content-Type': 'application/json;charset=utf-8'},
reader: {
type: 'json',
root: 'd'
},
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
}
}
}),
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="item">',
'<p>{bg_id}</p>',
'<p>{bg_short_desc}</p>',
'</div>',
'</tpl>'
),
itemSelector: 'div.item',
fullscreen: true




});
}
});