ExtJS Toolbar mit mehreren Reihen

Question

Ist es möglich, eine ExtJsToolBar mit mehreren Linien zu haben? Ich möchte ein paar Kontrollen auf der ersten Zeile und 3 ExtJsButtons auf dem zweiten. Die Symbolleiste ist die oberste Symbolleiste eines Panels.

Answer 1

Sie haben nicht erwähnt, was Widget wie Sie Symbolleiste hinzufügen, aber im Allgemeinen kann man so viele Symbolleiste hinzufügen, wie Sie wollen:

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

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

Wenn Sie an die Spitze des Netzes zusätzliche Symbolleiste hinzufügen, , dann finde die Panel-Komponente des Gitters und füge ihr Symbolleisten hinzu. Es könnte wie folgt aussehen (nicht getestet):

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

Answer 2

Ich bin nicht sicher, ob es möglich ist oder nicht, aber was kann man immer tun, ist Nordbereich zu teilen (wenn Grenze Layout zum Beispiel unter Verwendung) in zwei Reihen Zeile Layout. Dann können Sie der oberen Reihe eine Werkzeugleiste und der zweiten Reihe die andere hinzufügen.

Answer 3

Ich bin mir nicht sicher, ob dies ist genau das, was Sie suchen, aber Toolbars in Ext 3.0 neu gestaltet wurde. http://extjs.com/deploy/ext-3.0-rc1.1/examples/toolbar/toolbars.html

Answer 4

Blick auf diesen Thread im Forum Ext:

Sie können einen Blick auf nehmen. Es beschreibt, wie eine Symbolleiste erstellen und sie zu einer vorhandenen Symbolleiste machen.

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

Answer 5

Nicht sicher früheren Versionen, aber wie von ExtJS 4.0 können Sie es so tun, wenn Sie das Raster sind definieren:

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

Was dockedItems seine viel einfacher auch.

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

Ich weiß, es ist ziemlich alt und schon beantwortet, kann es jemand