Sencha Touch 2 vbox и высота детей

Question

У меня возникли проблемы с попыткой понять форматирование vbox в Sencha Touch 2. Моя цель состоит в том, чтобы каждый ребенок имел полную высоту (гибкое разделение экрана по частям). Чтобы это было просто, у меня есть подробное представление, которое показывает одну запись, а затем список элементов, которые коррелируют с этой записью.

Прямо сейчас, используя flex, каждый ребенок имеет заданную высоту и прокручивает себя. Я хочу, чтобы они были полностью высотой, а только родительский свиток. Если я возьму изгиб, ничего не появится.

Ext.define('app.view.MainView', { 
updateData : function(data) { 
    var panels = this.query('panel[tpl]'), 
     pLen = panels.length, 
     panel; 

    for (p = 0; p < pLen; p++) { 
     panel = panels[p]; 

     panel.setData(data); 
    } 

    this.callParent(arguments); 
}, 
extend: 'Ext.Container', 
xtype: 'mainView', 
config: { 
    layout: { 
     type: 'vbox' 
    }, 
    scrollable: true, 
    title: '', 
    items: [ 
     { 
      xtype: 'panel', 
      flex: 1, 
      scrollable: true, 
      styleHtmlContent: true, 
      tpl: Ext.create('Ext.XTemplate', 
       '<div class="view-top" id="view-{id}">' + 
       '<div>{body}</div>' + 
       '</div>') 
     }, 
     { 
      xtype: 'component', 
      cls: 'dark', 
      html: 'Top View' 
     }, 
     { 
      flex: 1, 
      xtype: 'list', 
      store: 'ViewStore', 
      variableHeights: true, 
      itemTpl: [ 
       '<div>{subject}</div>' 
      ] 

     } 
    ] 
} 

});

Answer 1

Нашли решение, для тех из вас, кто может приземлиться здесь с теми же проблемами, я отправлю решение.

В основном мне приходилось подсчитывать высоту каждого элемента списка после того, как было нарисовано представление, а затем установить высоту идентификатора для списка на эту новую высоту (ПРИМЕЧАНИЕ: мне пришлось добавить элемент с номером + 5 к общей высоте для размещения по каждому элементу)

Ext.define('app.view.ViewMain', { 
updateData : function(data) { 
    var panels = this.query('panel[tpl]'), 
     pLen = panels.length, 
     panel; 

    for (p = 0; p < pLen; p++) { 
     panel = panels[p]; 

     panel.setData(data); 
    } 

    this.callParent(arguments); 
}, 
extend: 'Ext.Container', 
xtype: 'viewMain', 
config: { 
    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    scrollable: true, 
    title: '', 
    items: [ 
     { 
      xtype: 'panel', 
      height: 'auto', 
      scrollable: null, 
      styleHtmlContent: true, 
      tpl: Ext.create('Ext.XTemplate', 
       '<div class="guest-top" id="view-{id}">' + 
       '<div>{body}</div>' + 
       '</div>') 
     }, 
     { 
      xtype: 'component', 
      cls: 'dark', 
      html: 'Guest Panels' 
     }, 
     { 
      xtype: 'list', 
      id: 'panelList', 
      store: 'ViewStore', 
      height: 1000, 
      scrollable: false, 
      variableHeights: true, 
      itemTpl: [ 
       '<div>{subject}</div>' 
      ] 
     } 
    ], 
    listeners: { 
     painted: function(element, eOpts){ 
      var totalHeight = 0; 
      var items = Ext.getCmp('panelList').getViewItems(); 
      var itemsLn = items.length; 
      for (i = 0; i < itemsLn; i++) { 
       item = items[i]; 
       totalHeight = totalHeight + item.element.dom.clientHeight; 
      } 
      Ext.get('panelList').setHeight(totalHeight + itemsLn + 5); 
     } 
    } 
}});