Not able to align ExtJS buttons vertically on right.

Question

I am using extjs and fabric canvas to generate the below panel,unfortunately I am not able to align all these buttons:

vertically as in the picture below using just extjs:

Answer 1

Suggestions:

1. you can set the width of all buttons equal and give equal left padding from the image.

2. you can use left the vertical menu-bar and place the buttons in it and modify CSS to remove its border so that it can become invisible.

   you can make 2 vbox in items and in first place image and in second half place buttons.

it's not looking good because of unequal width and space between buttons.for more help please provide code.

Answer 2

You need to use layout properties like vbox and hbox , here's the example:

FIDDLE (press Run if image doesn't load properly)

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