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

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

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

通过Ext.Ajax.request（{...}）
处理回复
向展开的行添加内容

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

在展开的行区域中添加“加载”文本/图标/任何内容
制作Ajax请求
处理回复
使用Ajax请求返回的数据替换加载文本/图标/其他内容

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

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

在ExtJs中的行扩展器的ajax上加载数据

1 个答案: