Question

我已经在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 () {
    }
})

但问题是如果我没有将布局为card的面板上的高度设置为300，则其高度变为0并且不显示任何内容甚至在设置布局以适应视口后我该怎么办？

Answer 1

当您将项目放入具有layout: 'vbox'的容器时，Sencha Touch 2需要知道这些子项目之间的高度比率。

如果您希望在vbox中包含全高项，请将此配置添加到该项，而不是height: 300，请使用flex:1

Answer 2

深入挖掘配置我发现flex作为配置的一部分..
通过这个属性，我可以定义具有vbox布局的容器内所有元素的比率所以如果我将flex设置为3个不同的项目为10,1,1那么第一个将占用空间的(10/(10+1+1))*100 % ..
对我有用..
但仍在寻找最终的答案

Answer 3

使用'fit'时，容器中只能有一个项目。我添加了几个'flex：'值来给出我认为你想要的东西。这是代码，它在SenchaFiddle上进行测试。

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 () {
    }
})

Sencha Touch 2面板未拉伸至全高

3 个答案: