無法在右側垂直對齊ExtJS按鈕。

Question

我正在使用extjs和fabric畫布來生成下面的面板，不幸的是我無法對齊所有這些按鈕：

垂直如下圖所示，僅使用extjs：

Answer 1

意見建議：

1. 您可以將所有按鈕的寬度設置為相等，並從圖像中給定相等的左填充。

2. 您可以使用垂直菜單欄的左側並在其中放置按鈕，然后修改CSS以刪除其邊框，使其變得不可見。

   您可以在項目，第一個圖片和第二個下半部分按鈕中創建2個vbox。

由於按鈕之間的寬度和間距不相等，因此效果不佳。要獲得更多幫助，請提供代碼。

Answer 2

您需要使用vbox和hbox類的layout屬性，下面是示例：

FIDDLE （如果圖像無法正確加載，請按Run ）

Ext.create({
xtype: 'container',
layout: {
    type: 'hbox',
    align: 'stretch'
},

items: [{
    xtype: 'imagecomponent',
    width: 500,
    alt: 'img1',
    src: 'https://i.imgur.com/Y3GKYOF.png'
}, {
    xtype: 'container',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    defaults: {
        margin: 5
    },
    items: [{
        xtype: 'button',
        text: 'Circle'
    }, {
        xtype: 'button',
        text: 'Box'
    }, {
        xtype: 'button',
        text: 'Arrow'
    }, {
        xtype: 'button',
        text: 'TextBox'
    }, {
        xtype: 'button',
        text: 'TextArea'
    }, {
        xtype: 'button',
        text: 'Delete'
    }, {
        xtype: 'button',
        text: 'Save'
    }]
}],
renderTo: Ext.getBody()
});