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

しかし、問題は、レイアウトがcard高さであるパネルに高さを300に設定しないと、高さが0になり
、ビューポートに収まるようにレイアウトを設定しても何も表示されないことです。どうすればよいですか?

4

3 に答える 3

2

でアイテムをコンテナに入れるときlayout: 'vbox'、SenchaTouch2はこれらの子アイテム間の高さの比率を知る必要があります。

vbox内にフルハイトのアイテムを配置する場合は、代わりにこの構成をそのアイテムに追加しheight: 300ます。flex:1

于 2012-05-31T14:04:29.510 に答える
1

flex構成の一部として見つけた構成をよく掘り下げます。このプロパティを使用して、レイアウト
を持つコンテナー内のすべての要素の比率を定義できるため 、フレックスを 3 つの異なる項目に 10,1,1 として設定すると、最初のものはスペースを占有します.. 私にとってはうまくいきました.. しかし、まだ最終的な回答を探していますvbox
(10/(10+1+1))*100 %

于 2012-05-31T14:07:18.717 に答える
1

'fit' を使用する場合、1 つのコンテナーに入れることができるアイテムは 1 つだけです。あなたが望むものを与えるために、いくつかの「flex:」値を追加しました。これがコードで、テスト用にSenchaFiddleにあります。

Ext.Loader.setConfig({
    有効: 真
});

Ext.application({
    名前: "SOMENAME",
    起動: 関数 () {
        //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('パネル').setActiveItem(0);
    }、
    init: 関数 () {
    }
}))
于 2012-05-31T14:07:28.233 に答える