Question

我有这段代码：

var dashboardPanel1 = Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    collapsible: true,
    margin: '0 0 50 0',

    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:20px',
        flex: 1,
        border: 0
    },

    title: '<span class="mytitle" id="keySettings"><a href="#" style="">Key settings</a></span>',

    items: [{
        html: '<img src="https://i.imgur.com/n7gOYrE.png" style="width: 20px; height: 20px">',
        flex: 0.2

    }, {
        html: 'Your key is active'
    }, {
        html: 'Expiring date: 27.04.2018'
    }, {
        html: '<img src="https://i.imgur.com/n7gOYrE.png" style="width: 20px; height: 20px">',
        flex: 0.2

    }, {
        html: 'Your key is inactive'
    }, {
        html: 'Expiring date: 27.03.2018'
    }]
});

显示包含一些内容的面板。但是我怎么能显示这个＆＃34;你的密钥是不活动的＆＃34;并在新行中过期日期。

如果我选择table布局，则无法获取内容streched（最大宽度）。所以我必须使用hbox。

有什么建议吗？

Answer 1

您可以随时嵌套盒子。根据您的要求，在hbox中使用vbox：

甚至是hbox内vbox内的hbox：

或许您可以使用表格布局并为tableAttrs添加宽度以使其拉伸：

layout: 'table',
tableAttrs: {
    width: '100%'
}

Answer 2

我还没有证实这一点，也不是一个好的答案。它假设这种布局是静态的而不是改变，我认为这不是你想要的。但是为了好玩，我想出的一个例子就是模仿你想要的东西。

＆＃13;

var dashboardPanel1 = Ext.create('Ext.Panel', {
      renderTo: Ext.getBody(),
      collapsible: true,
      margin: '0 0 50 0',
      flex: 1,
      layout: {
        type: 'hbox',
        align: 'stretch'
      },
      defaults: {
        flex: 0.5,
        border: 0
      },
      title: '<span class="mytitle" id="keySettings"><a href="#" style="">Key settings</a></span>',

      items: [{
          xtype: 'container',
          layout: {
            'type': 'vbox'
          },
          items: [{
              xtype: 'box',
              html: '<img src="https://i.imgur.com/n7gOYrE.png" style="width: 20px; height: 20px">',
            },
            {
              xtype: 'container',
              layout: {
                type: 'hbox'
              },
              defaults: {
                flex: 0.5
              },
              items: [{
                  xtype: 'box',
                  html: 'Your key is active'
                },
                {
                  xtype: 'box',
                  html: 'Expiring date: 27.04.2018'
                }
              ]
            }
          ]
        },
        {
          xtype: 'container',
          layout: {
            'type': 'vbox'
          },
          items: [{
              xtype: 'box',
              html: '<img src="https://i.imgur.com/n7gOYrE.png" style="width: 20px; height: 20px">',
            },
            {
              xtype: 'container',
              layout: {
                type: 'hbox'
              },
              defaults: {
                flex: 0.5
              },
              items: [{
                  xtype: 'box',
                  html: 'Your key is active'
                },
                {
                  xtype: 'box',
                  html: 'Expiring date: 27.04.2018'
                }
              ]
            }
          ]
        }
      });

＆＃13;

ExtJS - hbox布局新行

2 个答案: