css - 如果元素超过父宽度，ExtJS 4.0.7 如何换行

Question

如果分辨率低，按钮元素会位于另一个面板后面。在 Firebug 中，它们是绝对定位的。有什么办法可以改变这种行为吗？我尝试了很多方法，但都没有用，非常感谢。

var scanBar =
  {
    xtype: 'panel',
    border: 0,
    height: 60,
    layout: {
      type: 'hbox',
      align: 'stretch'
    },
    items:
      [
        {
          xtype: 'panel',
          flex: 1,
          autoScroll: true,
          layout: {
            type: 'hbox',
            pack:'left',
            align:'middle'
          },
          items:
            [
              {
                xtype: 'button',
                margin: '0 0 0 10',
                width: 24,
                text: '',
                tooltip: 'Acercar vista',
                iconCls: 'zoom_in',
                handler: function (btn) {
                  zoom(1.25);
                }
              },
              {
                xtype: 'button',
                margin: '0 0 0 0',
                width: 24,
                text: '',
                tooltip: 'Alejar vista',
                iconCls: 'zoom_out',
                handler: function (btn) {
                  zoom(0.8);
                }
              },
              {
                xtype: 'button',
                margin: '0 0 0 0',
                width: 24,
                text: '',
                tooltip: 'Restablecer vista',
                iconCls: 'zoom_reset',
                handler: function (btn) {
                  resetZoom();
                }
              },
              {
                xtype: 'button',
                margin: '0 0 0 0',
                width: 24,
                text: '',
                tooltip: 'Ajustar a la ventana',
                iconCls: 'zoom_fit',
                handler: function (btn) {
                  autoZoom();
                }
              },
              {
                id: 'resetImgBtn',
                icon: 'images/reset.png',
                xtype: 'button',
                margin: '0 20 0 0',
                width: 200,
                text: 'Descartar',
                hidden: true,
                handler: function (btn) {
                  descartar();
                }
              },
              imgToolsBar,
              cbDocDestino,
              {
                id: 'scanImgBtn',
                icon: 'images/icono_scanner.png',
                xtype: 'button',
                margin: '0 20 0 20',
                width: 150,
                text: 'Escanear',
                disabled: true,
                handler: function (btn) {
                  escanear();
                }
              },
              {
                id: 'loadImgBtn',
                icon: 'images/icono_archivo.png',
                xtype: 'button',
                margin: '0 20 0 0',
                width: 150,
                text: 'Cargar desde Archivo',
                disabled: true,
                handler: function (btn) {
                  cargarimagen();
                }
              },
              {
                id: 'exchangeImgBtn',
                icon: 'images/icono_intercambiar.png',
                xtype: 'button',
                margin: '0 20 0 0',
                width: 150,
                text: 'Intercambiar',
                disabled: true,
                hidden: fnIntercambiarDeshabilitada,
                handler: function (btn) {
                  intercambiar();
                }
              },
              {
                id: 'cancelExchangeImgBtn',
                icon: 'images/icono_intercambiar.png',
                xtype: 'button',
                margin: '0 20 0 0',
                width: 150,
                text: 'CANCELAR',
                hidden: true,
                handler: function (btn) {
                  cancelarIntercambiar();
                }
              }
            ]
        },

WWith 布局:列

Answer 1

为此使用 layout: 'column' 而不是 hbox。

这会打破线条，但不会重新设置容器的高度，因此如果您不相应地设置主容器的高度，面板看起来就像消失了一样。