1

我在 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 的面板上的布局是card它的高度变为 0 并且
即使在设置布局以适合视口之后也没有显示任何内容我该怎么办？

4

3 回答 3

2

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

如果您想在 vbox 中有一个全高项目，请将此配置添加到该项目，而不是height: 300使用flex:1

于 2012-05-31T14:04:29.510 回答
1

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

于 2012-05-31T14:07:18.717 回答
1

使用“fit”时，容器中只能有一件物品。我添加了几个 'flex:' 值来给出我认为你想要的。这是代码，它在SenchaFiddle上进行测试。

Ext.Loader.setConfig({
    启用：真
});

分机应用程序（{
    名称：“某人”，
    启动：函数（）{
        //Ext.Viewport.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('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);
    },
    初始化：函数（）{
    }
})
于 2012-05-31T14:07:28.233 回答