擴展行內的Ext JS組件

Question

這裏的簡單問題：我在Ext JS應用程序中有一個擴展行的工作網格。 繁榮。

目前我有html元素在我的擴展行內（這只是一個大的div），但似乎是所有擴展行都能夠顯示。

有無論如何渲染擴展行的內部組件？

乾杯隊友，upvotes等待！

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