javascript - 具有动态加载数据的 ExtJS 4.2.0 RowExpander

Question

我想使用 ExtJs 插件“RowExpander”，但是，我会在触发事件 expandbody 时加载数据。 我试过这段代码，但我不知道如何设置 rwoBody Expanded 的内容:

this.GridPrincipal.getView().addListener('expandbody', function (rowNode, record, expandRow, eOpts) {


        Ext.Ajax.request({
            url: 'getData/' + record.get('id'),
            method: 'POST',
            success: function (result, request) {
            // retrive the data
            var jsonData = Ext.util.JSON.decode(result.responseText);
            //code to change the text of the RowBody
                            //....
            },
            failure: function (result, request) {
            Ext.MessageBox.alert('Failed', result.responseText);
            return false;
            }
            });



    });

非常感谢。

Answer 1

可以将任何数据甚至其他组件渲染到扩展器中的一种解决方案是为其分配一个 div。

plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl: ['<div id="ux-row-expander-box-{id}"></div>'],
        expandOnRender: true,
        expandOnDblClick: true
    }]

其中“id”是您商店的 id 字段。

接下来在 expandbody 事件中，您可以使用例如Ajax 请求，然后使用 renderTo 配置将包含数据的面板或网格等呈现到此 div 中。