Внешние компоненты JS в расширенном ряду

Question

Простой вопрос здесь: У меня есть рабочая сетка с расширяющимися рядами внутри моего приложения Ext JS. Бум.

В настоящее время у меня есть html элементов внутри моей расширенной строки (это только один большой div), но это, кажется, все расширенные строки способны отображать.

Есть ли способ визуализации компонентов Ext внутри моих расширенных рядов?

Приветствия товарищей, 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();