ExtJS - hbox 布局新行答案

【问题标题】：ExtJS - hbox layout new rowExtJS - hbox 布局新行
【发布时间】：2018-04-06 13:48:51
【问题描述】：

我有这段代码：

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

它正在显示一个包含一些内容的面板。但是如何在新行中显示此“您的密钥无效”和到期日期。

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

有什么建议吗？

【问题讨论】：

你希望它是网格，对吧？

标签： javascript extjs

【解决方案1】：

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

甚至是 hbox 中的 vbox 中的 hbox：

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

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

【讨论】：

【解决方案2】：

我还没有验证这一点，它也不是一个很好的答案。它假定此布局是静态的并且不会更改，我认为这不是您想要的。但为了好玩，我想出了一个例子，它应该模仿你正在寻找的东西。

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

【讨论】：