1

このコードを別の質問から取得し、4つのボタンでウィンドウ全体を埋めようとしています。

私がすることは何も影響を与えていないようです。このfullscreen: trueオプションは常に無視されているようです。すべての垂直方向のスペースを占めるようにレイアウトを調整する必要があることを知るための秘訣は何ですか？

理想的には、このソリューションが3x3ボタンレイアウトでも機能することを望んでいます。

ここに画像の説明を入力してください

app.js

Ext.application({

    launch: function() {
        var view = Ext.create('Ext.Container', {
            // fullscreen: true,
            layout: {
                type: 'vbox',
                flex: 1
            },
            items: [{
                xtype: 'container',
                layout: 'hbox',

                items: [{
                    xtype: 'button',
                    height: '50%',
                    text: 'flat button',
                    ui: 'plain',
                    flex: 1,
                    handler: function() {
                        alert('top left')
                    }
                }, {
                    xtype: 'button',
                    height: '50%',
                    //ui: 'plain',
                    flex: 1,
                    handler: function() {
                        alert('top right')
                    }
                }]
            }, {
                xtype: 'container',
                layout: 'hbox',
                items: [{
                    xtype: 'button',
                    height: '50%',
                    //ui: 'plain',
                    flex: 1,
                    handler: function() {
                        alert('bottom left')
                    }
                }, {
                    xtype: 'button',
                    //ui: 'plain',
                    height: '50%',
                    flex: 1,
                    handler: function() {
                        alert('bottom right')
                    }
                }]
            }]
        });
        Ext.Viewport.add(view);
    }
});

SenchaTouchCDNを使用する標準のindex.html。

<!doctype html>
<html manifest="" lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>Sencha</title>
    <link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>

    <body>
    </body>

</html>
4

2 に答える 2

0

Thiem Nguyen の答えは、必要なものにはうまくいくかもしれませんが、これはボタンを画面全体に広げるのにうまくいきます。 

view = Ext.create('Ext.Container', {
        layout:'hbox',
        items:[ {
            xtype: 'container',
            width:'50%',
            layout: 'vbox',
            items:[{
                xtype:'button',
               // ui: 'plain',
                flex: 1,
                handler:function(){
                    alert('top left')
                }
            },{
                xtype:'button',
              // ui: 'plain',
                flex: 1,
                handler:function(){
                    alert('top right')
                }
            }]
        },{

            xtype: 'container',
            width:'50%',
            layout: 'vbox',
            items:[{
                xtype:'button',
               // ui: 'plain',
                flex: 1,
                handler:function(){
                    alert('bottom left')
                }
            },{
                xtype:'button',
              //  ui: 'plain',
                flex: 1,
                handler:function(){
                    alert('bottom right')
                }
            }]
        }]
});
于 2012-04-11T19:29:14.250 に答える
0

必要なものを正確に満たすように何かを変更しました (3x3 ボタンのレイアウト)。幸運を！:)

P/S: ソース コードをキャッチしやすくするために、ハンドラー関数を削除しました。

Ext.application({

    launch: function() {
        var view = Ext.create('Ext.Container', {
            layout: {
                type: 'vbox',
            },
            items: [
                {
                    xtype: 'container',
                    layout: 'hbox',
                    flex: 1,
                    items:[
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        }
                    ]
                },
                {
                    xtype: 'container',

                    layout: 'hbox',
                    flex: 1,

                    items:[
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        }
                    ]
                },
                {
                    xtype: 'container',

                    layout: 'hbox',
                    flex: 1,

                    items:[
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        },
                        {
                            xtype:'button',
                            ui: 'action',
                            flex: 1,
                        }
                    ]
                }
            ]
        });
        Ext.Viewport.add(view);
    }
});
于 2012-04-11T19:16:11.357 に答える