5

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

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

提前致谢

4

1 回答 1

0

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

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

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

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

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

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

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

于 2013-10-24T11:38:08.040 回答