ExtJS Toolbar con múltiples filas

Question

¿Es posible tener ExtJsToolBar con líneas múltiples? Quiero algunos controles en la primera línea y 3 ExtJsButtons en la 2da. La barra de herramientas es la barra de herramientas superior de un Panel.

Answer 1

Usted no ha mencionado a lo widget te gusta añadir barras de herramientas, pero en general se puede añadir tantas barras de herramientas que desee:

var panel = new Ext.Panel(); 
var tool1 = new Ext.Toolbar({...}); 
var tool2 = new Ext.Toolbar({...}); 

panel.add(tool1); 
panel.add(tool2); 
... 

Si quieres añadir la barra de herramientas adicional para la parte superior de la rejilla , luego encuentre el componente del panel de la cuadrícula y añádale barras de herramientas. Se podría tener este aspecto (no probado):

tPanel = grid.getTopToolbar().ownerCt; // get top toolbar's container panel 
tPanel.add(anotherToolbar); 

Answer 2

No estoy seguro, si es posible o no, pero lo que siempre se puede hacer es dividir el área norte (si usa el diseño de borde por ejemplo) en dos filas mediante el diseño de filas. Luego puede agregar una barra de herramientas a la fila superior y la otra a la segunda fila.

Answer 3

No estoy seguro si esto es exactamente lo que está buscando, pero las barras de herramientas se ha renovado en Ext 3.0.

Es posible que desee echar un vistazo a: http://extjs.com/deploy/ext-3.0-rc1.1/examples/toolbar/toolbars.html

Answer 4

mirada a este tema en el foro Ext. Describe cómo crear una barra de herramientas y representarla en una barra de herramientas existente.

http://www.extjs.com/forum/showthread.php?t=12433

Answer 5

No está seguro acerca de las versiones anteriores, pero a partir de ExtJS 4.0 puede hacerlo de esta manera cuando se está definiendo la red:

dockedItems: [ 
    { 
     xtype: 'toolbar', 
     dock: 'top', 
     items: [ 
      {text:'Toolbar 1 Button 1'}, 
      {text:'Toolbar 1 Button 2'} 
     ] 
    }, 
    { 
     xtype: 'toolbar', 
     dock: 'top', 
     items: [ 
      {text:'Toolbar 2 Button 1'} 
     ] 
    } 
], 

http://dev.sencha.com/deploy/ext-4.0.2a/docs/#/api/Ext.panel.Panel

Answer 6

¿Qué pasa con su dockedItems mucho más simple también.

var toolbar1 = { 
    xtype : 'toolbar', 
    dock : 'top', // bottom, right, left 
    items: [...] 
}; 

var toolbar2 = { 
    xtype : 'toolbar', 
    dock : 'top', 
    items: [...] 
}; 

Ext.create('Ext.panel.Panel', { 
    dockedItems: [toolbar1,toolbar2] 
}); 

Sé que es bastante viejo y ya ha respondido, puede ser que puede ayudar a alguien :)