ajax - 在 ExtJs 中为行扩展器加载 ajax 数据

Question

我正在使用 Sencha ExtJs 网格 4.2 。我正在为我的网格使用 Expander 插件，并尝试从 Ajax 加载扩展区域下的数据。现在我正在使用此代码来显示扩展数据。

plugins: [{
    ptype: 'rowexpander',
    rowBodyTpl: new Ext.XTemplate(
        '<br><img height="31" width="32" src="../upload/patient/thumb/{patient_image}">',
        '&nbsp;&nbsp;&nbsp;<p><b>{fname}, {lname}</b></p>',
        '<br> {accordian_view}'
    )
}],

在这里您可以看到数据是预先填充的，但我的要求是在扩展时加载数据。我正在努力寻找事件或过程来做到这一点。但仍然没有运气。如果有人有任何想法，请分享。

提前致谢

Answer 1

您可以查看 expandbody RowExpander 插件上的事件:http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.RowExpander-event-expandbody

此事件不仅传递行的绑定(bind)记录，还传递展开的元素，因此您可以:

通过 Ext.Ajax.request({...})

请求数据

处理回复

将内容添加到扩展行

然而，要记住的一件事是这种方法的异步性质。也就是说，该行将立即扩展，而不管后续请求需要多长时间才能返回。因此，在处理 expandbody 时，这样做可能是个好主意。事件:

将“加载”文本/图标/任何内容添加到扩展行区域

发出 Ajax 请求

处理回复

将 loading text/icon/whatever 替换为 Ajax 请求返回的数据

很可能有人已经这样做了，但您也可以(我强烈建议)将此过程包装到您自己的自定义插件中，该插件扩展了 RowPlugin。这样你就可以在你的应用程序的其他地方为任何网格使用它。如果您最终创建了自定义插件，请与社区分享!

编辑:一个快速的谷歌揭示了一些正是这样做的自定义插件。例如: https://github.com/nickbretz/Ext.ux.AsyncRowExpander/blob/master/AsyncRowExpander.js