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。

这会破坏线条，但不会重新设置容器的高度，所以如果你没有相应地设置主容器的高度，你的面板就会消失。