无法在右侧垂直对齐ExtJS按钮。

Question

我正在使用extjs和fabric画布来生成下面的面板，不幸的是我无法对齐所有这些按钮：

仅使用extjs，如下图所示：

Answer 1

建议：

1. 您可以将所有按钮的宽度设置为相等，并从图像中赋予相同的左填充。

2. 您可以使用垂直菜单栏的左侧，将按钮放置在其中，然后修改CSS以删除其边框，使其变得不可见。

   您可以在项目，第一个图片和第二个下半部分的按钮中创建2个vbox。

由于按钮之间的宽度和间距不相等，因此效果不好。要获得更多帮助，请提供代码。

Answer 2

您需要使用layout之类的属性，例如vbox和hbox，例如：

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