Javascript Sencha Touch 2面板未拉伸至全高

我已在sencha touch 2中提出此申请

Ext.application({
    name: "SOMENAME",
    launch: function () {
        //Ext.Viewport.setLayout({type:'fit',align:'stretch'});
        var mainPanel = Ext.create('Ext.Container', {
            layout: 'vbox',
            items: [
                {
                    xtype: 'panel',
                    layout: {
                        type: 'card',
                        animation: 'slide'
                    },
                    height: 300,
                    id: 'nooPanel',
                    items: [
                        {
                            html: 'Page 1'
                        },
                        {
                            html: 'Page 2 asdasdasd'
                        },
                        {
                            html: 'Page 3 asdq323434'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    text: 'Next',
                    handler: function (button, e, eOpts) {
                        var panel = Ext.getCmp('nooPanel');
                        var totalItems = panel.getInnerItems().length;
                        var index = panel.getInnerItems().indexOf(panel.getActiveItem());
                        panel.setActiveItem((index + 1) % totalItems);


                    }
                }
            ]
        });
        Ext.Viewport.add(mainPanel);
        mainPanel.down('panel').setActiveItem(0);
    },
    init: function () {
    }
})

但问题是，如果我不将布局为

卡的面板上的高度设置为300，则其高度将变为0，并且不会显示任何内容

即使将布局设置为适合视口，我该怎么办？
当您将项目放入带有
布局的容器：“vbox”
时，Sencha Touch 2需要知道这些子项目之间的高度比

如果您希望在vbox中有一个完整高度的项目，请将此配置添加到该项目中，而不是
height:300
，使用
flex:1
将项目放入具有
布局的容器中：“vbox”
，Sencha Touch 2需要知道这些子项目之间的高度比

如果您想在vbox中有一个完整高度的项目，请将此配置添加到该项目中，而不是使用
height:300
，使用
flex:1
深入了解我发现的配置
flex
，作为配置的一部分。

通过此属性，我可以定义容器中具有
vbox
layout

因此，如果我将flex设置为3个不同的项目10,1,1，那么第一个项目将占用
（10/（10+1+1））*100%的空间。

对我来说挺有用的

但是仍然在寻找最终的ans
深入研究配置，我发现作为配置的一部分，
flex
。

通过此属性，我可以定义容器中具有
vbox
layout

因此，如果我将flex设置为3个不同的项目10,1,1，那么第一个项目将占用
（10/（10+1+1））*100%的空间。

对我来说挺有用的

但仍在寻找最终的ans
当您使用“fit”时，容器中只能有一件物品。我添加了两个“flex:”值，以提供我认为您需要的内容。这是代码，正在进行测试

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: "SOMENAME",
    launch: function () {
        //Ext.Viewport.setLayout({type:'fit',align:'stretch'});
        var mainPanel = Ext.create('Ext.Container', {
            layout: 'vbox',
            items: [
                {
                    xtype: 'panel',
                    flex: 20,
                    layout: {
                        type: 'card',
                        animation: 'slide'
                    },
                    //height:300,
                    id: 'nooPanel',
                    items: [
                        {
                            html: 'Page 1',
                            flex:1
                        },
                        {
                            html: 'Page 2 asdasdasd'
                        },
                        {
                            html: 'Page 3 asdq323434'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    text: 'Next',
                    flex: 1,
                    handler: function (button, e, eOpts) {
                        var panel = Ext.getCmp('nooPanel');
                        var totalItems = panel.getInnerItems().length;
                        var index = panel.getInnerItems().indexOf(panel.getActiveItem());
                        panel.setActiveItem((index + 1) % totalItems);


                    }
                }
            ]
        });
        Ext.Viewport.add(mainPanel);
        mainPanel.down('panel').setActiveItem(0);
    },
    init: function () {
    }
})
Ext.Loader.setConfig({
已启用：true
});
外部应用程序({
姓名：“某某姓名”，
启动：函数（）{
//setLayout（{type:'fit'，align:'stretch'}）；
var mainPanel=Ext.create（'Ext.Container'{
布局：“vbox”，
项目：[
{
xtype:'面板'，
弹性：20，
布局：{
键入：“卡”，
动画：“幻灯片”
},
//身高：300，
id:“nooPanel”，
项目：[
{
html:“第1页”，
弹性：1
},
{
html:“第2页asdasdasd”
},
{
html:“第3页asdq323434”
}
]
},
{
xtype:'按钮'，
文本：“下一个”，
弹性：1，
处理程序：功能（按钮、e、eOpts）{
var panel=Ext.getCmp（'nooppanel'）；
var totalItems=panel.getInnerItems（）.length；
var index=panel.getInnerItems（）.indexOf（panel.getActiveItem（））；
panel.setActiveItem（（索引+1）%totalItems）；
}
}
]
});
Ext.Viewport.add（主面板）；
mainPanel.down（'panel'）.setActiveItem（0）；
},
init：函数（）{
}
})
使用“fit”时，容器中只能有一个项目。我添加了两个“flex:”值，以提供我认为您需要的内容。这是代码，正在进行测试

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: "SOMENAME",
    launch: function () {
        //Ext.Viewport.setLayout({type:'fit',align:'stretch'});
        var mainPanel = Ext.create('Ext.Container', {
            layout: 'vbox',
            items: [
                {
                    xtype: 'panel',
                    flex: 20,
                    layout: {
                        type: 'card',
                        animation: 'slide'
                    },
                    //height:300,
                    id: 'nooPanel',
                    items: [
                        {
                            html: 'Page 1',
                            flex:1
                        },
                        {
                            html: 'Page 2 asdasdasd'
                        },
                        {
                            html: 'Page 3 asdq323434'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    text: 'Next',
                    flex: 1,
                    handler: function (button, e, eOpts) {
                        var panel = Ext.getCmp('nooPanel');
                        var totalItems = panel.getInnerItems().length;
                        var index = panel.getInnerItems().indexOf(panel.getActiveItem());
                        panel.setActiveItem((index + 1) % totalItems);


                    }
                }
            ]
        });
        Ext.Viewport.add(mainPanel);
        mainPanel.down('panel').setActiveItem(0);
    },
    init: function () {
    }
})
Ext.Loader.setConfig({
已启用：true
});
外部应用程序({
姓名：“某某姓名”，
启动：函数（）{
//setLayout（{type:'fit'，align:'stretch'}）；
var mainPanel=Ext.create（'Ext.Container'{
布局：“vbox”，
项目：[
{
xtype:'面板'，
弹性：20，
布局：{
键入：“卡”，
动画：“幻灯片”
},
//身高：300，
id:“nooPanel”，
项目：[
{
html:“第1页”，
弹性：1
},
{
html:“第2页asdasdasd”
},
{
html:“第3页asdq323434”
}
]
},
{
xtype:'按钮'，
文本：“下一个”，
弹性：1，
处理程序：功能（按钮、e、eOpts）{
var panel=Ext.getCmp（'nooppanel'）；
var totalItems=panel.getInnerItems（）.length；
var index=panel.getInnerItems（）.indexOf（panel.getActiveItem（））；
panel.setActiveItem（（索引+1）%totalItems）；
}
}
]
});
Ext.Viewport.add（主面板）；
mainPanel.down（'panel'）.setActiveItem（0）；
},
init：函数（）{
}
})