Как сделать сетку сетки изменить размер экрана?

Я взял этот код из другого вопроса, и теперь я пытаюсь получить четыре кнопки, чтобы заполнить все окно. Ничто из того, что я делаю, похоже, не влияет. Опция «fullscreen: true» всегда игнорируется. Какой фокус в том, что вам нужно настроить макет так, чтобы он занимал все вертикальное пространство? В идеале, я бы хотел, чтобы это решение работало и для макета кнопки 3x3.Как сделать сетку сетки изменить размер экрана?

enter image description here

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, который использует Сенча сенсорный CDN.

 
<!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>

источник

2012-04-11 Anonymous

Я изменил что-то, чтобы удовлетворить именно то, что вам нужно (расположение кнопок 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-11 19:16:11

Похоже, что «высота:» вызвала проблему, и «flex: 1» был удален из vbox и помещен на два hbox. Было ли какое-то общее правило, которое я пропустил? –

yep. 'flex' - это просто масштабировать относительные ширины/высоты дочерних компонентов внутри hbox или vbox, поэтому не используйте его в ** outermost ** container –

ответ Тхий Нгуен может работать на то, что вам нужно, но это будет работать на растяжение кнопок на экране.

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-11 19:29:14 fuzzyLikeSheep

Я думаю, что выражение« flex: 1 »на каждой коробке такое же, как при использовании что «ширина: 50%» или «высота: 50%». Проголосовал за вас обоих, но так как Тием был первым, я собираюсь принять его ответ. Я читаю ваши решения в других вопросах Sencha, чтобы учиться, и я обязательно отвечу на другие хорошие ответы. Спасибо, парни. –

Да, с использованием гибкости и ширины/высоты немного избыточно. Никаких трудностей. – fuzzyLikeSheep

Как сделать сетку сетки изменить размер экрана?

ответ

Смежные вопросы