javascript - 展開された行内の Ext JS コンポーネント

Question

ここでの簡単な質問: Ext JS アプリケーション内で行を展開する作業グリッドがあります。ブーム。

現在html、展開された行内に要素があります (これは 1 つの大きな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();