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

【问题标题】：Load data on ajax for Row expander in ExtJs在 ExtJs 中为行扩展器加载 ajax 数据
【发布时间】：2013-11-03 01:24:13
【问题描述】：

我正在使用 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}'
    )
}],

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

提前致谢

【问题讨论】：

标签： ajax extjs

【解决方案1】：

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

这个事件不仅传递了行的绑定记录，还传递了展开的元素，所以你可以：

通过 Ext.Ajax.request({...}) 请求数据
处理响应
向展开的行添加内容

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

将“加载”文本/图标/任何内容添加到展开的行区域中
发出 Ajax 请求
处理响应
将加载文本/图标/任何内容替换为从 Ajax 请求返回的数据

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

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

【讨论】：

遗憾的是，这个 AsyncRowExpander 插件不适用于 4.2.1 :(