javascript - 扩展行中的 Ext JS 组件

Question

这里有一个简单的问题:我有一个工作网格，在我的 Ext JS 应用程序中可以扩展行。 繁荣。

目前，我的扩展行中有 html 元素(它只是一个大 div)，但这似乎是扩展行能够显示的全部内容。

是否可以在扩展行的内部渲染 Ext 组件？

干杯伙伴们，点赞等待!

Answer 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();