ExtJS grab JSON result ExtJS grab JSON result json json

ExtJS grab JSON result


The straightforward approach:

Ext.Ajax.request({  loadMask: true,  url: 'myfile.php',  params: {id: "1"},  success: function(resp) {    // resp is the XmlHttpRequest object    var options = Ext.decode(resp.responseText).options;    Ext.each(options, function(op) {      alert(op.message);    }  }});

Or you could do it in a more Ext-ish way using Store:

var messages = new Ext.data.JsonStore({  url: 'myfile.php',  root: 'options',  fields: [    {name: 'text', mapping: 'message'}  ],  listeners: {    load: messagesLoaded  }});messages.load({params: {id: "1"}});// and when loaded, you can take advantage of// all the possibilities provided by Storefunction messagesLoaded(messages) {  messages.each(function(msg){    alert(msg.get("text"));  });}

One more example to address the last comment:

var messages = [{title: "1"},{title: "2"},{title: "3"}];var titles = msg;Ext.each(messages, function(msg){  titles.push(msg.title);});alert(titles.join(", "));

Although I would prefer doing it with a Array.map (which isn't provided by Ext):

var text = messages.map(function(msg){  return msg.title;}).join(", ");alert(text);


Use the success and failure properties:

Ext.Ajax.request({    loadMask: true,    url: 'myfile.php',    params: {id: "1"},    success: function(response, callOptions) {       // Use the response    },    failure: function(response, callOptions) {       // Use the response    }});

See the Ext API docs for more details


check this sample fiddle which is for Ext JS 4. http://jsfiddle.net/mrigess/e3StR/

Ext 4 onward utilizes Ext.JSON.encode() and Ext.JSON.decode() ; while Ext 3 uses Ext.util.JSON.encode() and Ext.util.JSON.decode()