Q:

ExtJS 4.0.7 how to break line if elements exceeds parent width

If resolution is low, the button elements get behind another panel. In Firebug they are absolute positioned. Is there a way I can change this behaviour? I tried many things but none worked, thanks a lot.

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 layout: column 

A:

Use layout: 'column' instead of hbox for that.
That will break the line but will not re-set the height of your container, so it will seem like your panel disappeared if you don't set the height of the main container accordingly.

