在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

您可以查看expandbodyRowExpander 插件上的事件：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