Button positioning in Ext js

Question

JavaScript

Hello everyone,
how to arrange 3 buttons on the panel so that one is on the left and the other two are on the right.
I insert it like this.
selectPanel = new Ext.Panel({ button: [ { text: 'Select' }, { text: 'Advanced options' }, { text: 'Back' } ] })
If you place it on a bar, you can specify '->', but I don’t know how to do it with buttons.
I understand that the question is probably very rude, but I'm new to ext js, I dug into the mana, either I'm blind (most likely), or I need to somehow cunningly.

Answer 1

The regular means of the button constructor will not work.
You can use the bottombar of the panel and place the buttons in 2 containers with the desired attributes.
In general, look at the examples of Ext.NET , I myself at one time learned a lot from there for markup. There, of course, the markup is server-side, but the essence, I hope, will be clear.

Answer 2

The simplest option is to use the '->' element in the buttons array http://jsfiddle.net/yW8Gs/3/

Answer 3

I can offer my own.
The idea is simple - between the buttons, insert a "spacer container," which will press some buttons to the left side, and others to the right.
Something like this ( jsfiddle.net/yW8Gs/1/ ):

Ext.create('Ext.Panel', { 
    layout: 'hbox', // важно
    renderTo: Ext.getBody(),
    items: [
        { xtype: 'button', text: 'Select' }, 
        { xtype: 'container', flex:1 },        // <== magic )
        { xtype: 'button', text: 'Advanced options' },   
        { xtype: 'button', text: 'Back' }
    ]
})