0 
I am using Extjs 4.1.1

下部にツールバーを追加したパネルがあります。このツールバーには 3 つのアイテムがあります。最初の行に最初のアイテムを配置し、次の行に 2 つのアイテムを配置します。

画像のように、上記のアイテムを赤い四角形に合わせたいと思います。私のコードは以下の通りです。

どうすればそれを行うことができますか？

私のコードはこのようなものです

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

] }]、

ここに画像の説明を入力

4

1 に答える 1

0

考えられる解決策の 1 つは、2 つの下部ツールバーをパネルに追加することです。ちょうどこのような：

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/

于 2013-04-03T02:12:55.760 に答える