Sencha touch 2 Sencha Touch 2 vbox和儿童身高

我在尝试理解Sencha Touch 2中的vbox格式时遇到问题。我的目标是让每个孩子都长得很高（flex将屏幕分成若干部分）。为了简单起见，我有一个详细视图，显示一条记录数据，然后是与该记录相关的项目列表

现在，使用flex，每个孩子都有一个设定的高度并滚动自己。我希望他们是全高和家长只滚动。如果我把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>'
            ]

        }
    ]
}

Ext.define（'app.view.MainView'{
updateData:函数（数据）{
var panels=this.query（'panel[tpl]'），
pLen=面板长度，
面板
对于（p=0；p

---

}))

找到了一个解决方案，对于那些可能在这里遇到相同问题的人，我将发布解决方案

基本上，我必须在绘制视图后计算每个列表元素的高度，然后将列表id的高度设置为新的高度（注意：我必须将itemcount+5添加到总高度以适应每个项目）

Ext.define（'app.view.ViewMain'{
updateData:函数（数据）{
var panels=this.query（'panel[tpl]'），
pLen=面板长度，
面板
对于（p=0；p

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