extjs4.1 - Extjs 4.1.1 如何将工具栏项对齐在其他项下方？

Question

I am using Extjs 4.1.1

我有面板，我在底部添加了工具栏。这个工具栏有 3 个项目，我想在第一行中放置第一个项目，并在下一行保留两个项目，即在其他项目下方。

如图所示，我想将如上所示的项目与红色矩形对齐。我的代码如下所示。

请建议我该怎么做？

我的代码是这样的

 dockedItems: [ 
                     {
            xtype: 'toolbar',
            dock: 'bottom',
            height:60,
            items: [
                    {
                        xtype: 'tbtext',
                        id:'costId',
                        text   : "Total Cost <br> $66,000",
                        height : 40
                    },
                    {
                        xtype: 'button', 
                        autoAlign: 'bottom',
                        id: 'saveButton',
                        text: 'Add to BOM', 
                        handler: function() {
                            saveProduct();
                        } 
                    },
                    {
                        xtype: 'button', 
                        autoAlign: 'bottom',
                        id: 'cancelButton',
                        text: 'Cancel', 
                        handler: function() {
                            cancel();
                        }
                    }

] }],

Answer 1

一种可能的解决方案是在面板中添加两个底部工具栏。像这样：

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    border: false,
    style: {
        background: 'white'
    },
    items: [{
        text: 'Add to BoM',
        cls: 'add-to-bom-button'
    }, {
        text: 'Cancel',
        cls: 'cancel-button'
    }]
}, {
    xtype: 'toolbar',
    dock: 'bottom',
    border: false,
    style: {
        background: 'white'
    },
    items: [costContainer]
}]

costContainer在哪里

var costContainer = Ext.create('Ext.container.Container', {
border: false,
layout: 'vbox',
items: [{
    xtype: 'label',
    html: 'Total Cost',
    cls: 'total-cost-label'
}, {
    xtype: 'label',
    html: '$ 66,000',
    cls: 'price-label'
}]
});

我认为这个例子看起来像你正在寻找的，只需要修复 css。 http://jsfiddle.net/alexrom7/LHK39/3/