ExtJS左侧工具栏是水平的而不是垂直的

Question

我正在使用ExtJS创建左侧工具栏，但图标仍然是水平而不是垂直。 知道为什么吗？！

这是我创建工具栏的方式：

function createActions() {
    actions['nav'] = createAction(panControl,"","Pan", "pan48", true, "navGroup");
    actions['zoomin'] = createAction(zoomboxInControl,"", "ZoomIn", "zoomin48", true, "navGroup");
    actions['zoomout'] = createAction(zoomboxOutControl,"", "ZoomOut", "zoomout48", true,"navGroup");
}

function createAction(control, text, title, iconCls, allowDepress, toggleGroup, disabled) {
    return Ext.create('GeoExt.Action', {
        control: control,
        map: map,
        scale: 'large',
        allowDepress: allowDepress,
        toggleGroup: toggleGroup,
        group: toggleGroup,
        disabled: disabled,
        hideText: true,
        tooltip:
                {
                    text: text,
                    title: title
                },
        iconCls: iconCls
    })
}

function createToolBar() {        

    toolbar = Ext.create('Ext.toolbar.Toolbar', {
        id: 'toolbar',
        enableOverflow: true,
        items: [
         Ext.create('Ext.button.Button', actions["nav"])
                  , Ext.create('Ext.button.Button', actions["zoomin"])
                  , Ext.create('Ext.button.Button', actions["zoomout"])
                  , Ext.create('Ext.button.Button', actions["maxExt"])
        ]
    });

我得到的基本上是这样的：

任何想法？！

Answer 1

您需要使用vbox布局。

function createToolBar() {        

toolbar = Ext.create('Ext.toolbar.Toolbar', {
    id: 'toolbar',
    layout: 'vbox', <----- this should do it
    enableOverflow: true,
    items: [
     Ext.create('Ext.button.Button', actions["nav"])
              , Ext.create('Ext.button.Button', actions["zoomin"])
              , Ext.create('Ext.button.Button', actions["zoomout"])
              , Ext.create('Ext.button.Button', actions["maxExt"])
    ]
});

此处示例：http://jsfiddle.net/awesomepeter/Ts7Va/2/

Answer 2

您需要使用vertical配置告诉它是垂直的。