在每个ajax响应之后在div中显示json返回的消息，extjs4网格

Question

我有一个 gridpanel ，一个模型，一个带有 ajax 代理的自动同步存储，具有读取和更新功能以及 extjs4 中的 RowEditing 插件。

考虑以下 json：

{ "success": true,"Message":"Grid Data Successfully updated.", "users": {"uname":"jdoe","fname":"John","lname":"Doe","SSN":125874,"mail":"[email protected]"},{"uname":"jsmith","fname":"Jack","lname":"Smith","SSN":987456,"mail":"[email protected]"}} 

我想知道是否有办法在收到每个响应后将“Message”的值呈现到 HTML div 标签（例如 my_div）？

Answer 1

您可以使用 DOM Helper，请参阅 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"); 
});​

上面的代码将获取 ID 为 test 的 HTML 元素，并且它将插入字符串在此 div 内容的前面添加此字符串 beforeBegin。

查看要玩的小提琴： http://jsfiddle.net/PddU4/Prepend 这个字符串

编辑2012-02-16：

你需要监听你的代理成功和失败：（你也可以在加载你的代理时实现一个监听器存储或更新）

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

根据您的评论进行编辑：

首先确保您在阅读器中正确配置了 successProperty 和 messageProperty。然后在您想要的位置实现侦听器，更新、删除、添加、异常等：（

在代理对象中配置侦听器）

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

当您 console.log(response) 时，您将看到响应对象。这将是您实际的 JSON，因此您需要解析它（如 doJSON() 方法中所示）：

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

请查看此 AJAX 教程：http://www.sencha.com/learn/legacy/Manual:Core:Ext.Ajax