Ext扩展行中的JS组件

时间:2013-09-30 18:17:43

标签: javascript extjs grid row

这里的简单问题:我的Ext JS应用程序中有一个扩展行的工作网格。的动臂。

目前我在展开的行中有html个元素(它只是一个大的div),但这似乎是所有展开的行都能够显示。

无论如何都要在我的扩展行中中呈现Ext组件吗?

干杯队友,赞成等待!

1 个答案:

答案 0 :(得分:1)

您只需将组件渲染到行扩展器元素中即可。

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    plugins: {
        ptype: 'rowexpander',
        rowBodyTpl : [
            '<div class="row-expander-ct"></div>'
        ]
    },
    store: {
        fields:['name', 'email', 'phone'],
        data: [
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]
    },
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 300,
    width: 400,
    renderTo: Ext.getBody()
});

grid.store.on({
    // Delay the execution of the listener because the grid view will also
    // react to this event, and we want the rows to be rendered before we
    // modify them...
    delay: 1,
    load: function() {
        Ext.each(grid.el.query('.row-expander-ct'), function(ct) {
            Ext.widget('textfield', {
                renderTo: ct
                ,fieldLabel: "Label"
                ,width: '100%'
            });
        });
    }
});

grid.store.load();