Question

是否可以使用包含多行的ExtJsToolBar？我想在第一行有几个控件，在第二行需要3个ExtJsButtons。工具栏是Panel的顶部工具栏。

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

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

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

我知道它已经很老了并且已经回答了，可能它可以帮助某人：）

Answer 4

我不确定这是否正是您所寻找的，但工具栏已在Ext 3.0中进行了修改。

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

Answer 5

我不确定，是否可能，但你总能做的是使用行布局将北区（如果使用边框布局）划分为两行。然后，您可以将一个工具栏添加到顶行，将另一个工具栏添加到第二行。

Answer 6

在Ext论坛中查看此主题。它描述了如何创建工具栏并将其呈现到现有工具栏。

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

具有多行的ExtJS工具栏

6 个答案: