Show json returned message in a div after each ajax response , extjs4 grid

Question

I have a gridpanel , a Model, an autosync Store with an ajax proxy with read and update functions and a RowEditing plugin in extjs4 .

Consider the following json:

{ "success": true,"Message":"Grid Data Successfully updated.", "users": {"uname":"jdoe","fname":"John","lname":"Doe","SSN":125874,"mail":"jdoe@example.org"},{"uname":"jsmith","fname":"Jack","lname":"Smith","SSN":987456,"mail":"smith@example.com"}} 

I want to know if there is a way to render the value of "Message" to an HTML div tag (my_div for example) after receiving each response?

Answer 1

You can use the DOM Helper, see the sencha api : http://docs.sencha.com/ext-js/4-0/#!/api/Ext.DomHelper

Ext.onReady(function(){
    Ext.DomHelper.insertHtml('beforeBegin', Ext.getDom('test'), "Prepend this string"); 
});​

Above code will get the HTML element with ID test and it will insert the string Prepend this string beforeBegin of the content of this div.

See the fiddle to play around: http://jsfiddle.net/PddU4/Prepend this string

EDIT 2012-02-16:

You need to listen to your proxies success and failure: (you could also implement a listener when loading your store or on update)

listeners: {
    success: function( response, options ){     
       console.log(response);
    },
    failure: function( response, options ){
        console.log(response);
    },
}

EDIT BASED ON YOUR COMMENT:

First make sure you configured properly your successProperty and messageProperty in your reader. Then implement the listener where you want it to be, update, remove, add, exception etc. :

(configure the listener within your proxy object)

listeners   : {
    update : function(thisStore, record, operation ) {
        console.log('Update happened');
        console.log(record);
        console.log(operation);
    },
    save : function() {
        console.log('Save happened');
    },
    exception : function(dataproxy, type,  action, options,response,  arg) {
        console.log('Error happened');
        console.log(response);
                    doJSON(result.responseText);
    },
    remove : function() {
        console.log("Record removed");
    }
}

When you console.log(response), you will see the response object. This would be your actual JSON so you need to parse it (as in doJSON() method):

 function doJSON(stringData) {
    try {
        var jsonData = Ext.util.JSON.decode(stringData);
        Ext.MessageBox.alert('Success', 'Your server msg:<br />jsonData.date = ' + jsonData.message);
    }
    catch (err) {
        Ext.MessageBox.alert('ERROR', 'Could not decode ' + stringData);
    }
  }

Please check out this AJAX tutorial: http://www.sencha.com/learn/legacy/Manual:Core:Ext.Ajax