ExtJS 多行工具栏

Question

如何在ExtJsToolBar中使用多行？我想要在第一行上放置几个控件，第二行上放置3个ExtJsButtons。该工具栏是面板的顶部工具栏。

- user99322

Answer 1

之前版本不确定，但从ExtJS 4.0开始，您可以在定义网格时像这样实现：

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

- Josh Justice

Answer 2

你没有提到想要在哪个小部件上添加工具栏，但通常你可以添加任意数量的工具栏：

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

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

如果你想在表格上方添加额外的工具栏，那么需要找到表格的面板组件并在其中添加工具栏。可能会像这样（未经测试）：

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

- Thevs

Answer 3

dockedItems是一个简单易懂的属性。

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

我知道这个问题已经很老了，并且已经有人回答过了，但也许它可以帮助某些人 :)

- Aman Gupta

Answer 4

我不确定这是否完全符合您的要求，但工具栏在Ext 3.0中已经进行了改进。

您可能想要看一下： http://extjs.com/deploy/ext-3.0-rc1.1/examples/toolbar/toolbars.html

- tikotzky

Answer 5

看看Ext论坛上的这个帖子。它描述了如何创建一个工具栏并将其渲染到现有的工具栏中。

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

- Paul Moore

Answer 6

我不确定是否可能，但您可以始终使用行布局将北区域（例如，如果使用边框布局）分成两行。然后，您可以将一个工具栏添加到顶部行，另一个工具栏添加到第二行。

- Igor Pavelek