画面に合わせてボタングリッドのサイズを変更する方法は？

Question

私は別の質問からこのコードを取りましたが、今はウィンドウ全体を埋めるために4つのボタンを取得しようとしています。私には何の影響もないようです。 'fullscreen：true'オプションは常に無視されるようです。すべての垂直方向のスペースを取るようにレイアウトを調整する必要があることを知っているのは何ですか？理想的には、私はこのソリューションを3x3ボタンレイアウトでも動作させたいと思っています。煎茶タッチCDNを使用しています

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); 
    } 
}); 

標準index.htmlを。

Answer 1

私はあなたが必要とするもの（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); 
    } 
}); 

Answer 2

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') 
       } 
      }] 
     }] 
});