CODEWITHSUNDEEP
buttonextjslayout
Vipin
Vipin

Reputation: 811

ExtJS button alignment

In ExtJs Panel buttons, I want to create buttons in 2 rows as below;

b1 b2 b3

b4 b5 b6

By default it is creating the buttons in a single row. b1 b2 b3 b4 b5 b6.

How can i set layout for buttons from panel.

I tried buttongroup, it works well. but just wanted to know if we can do the layout.

Thanks.

Upvotes: 0

Views: 411

Answers (1)

Prasad K - Google
Prasad K - Google

Reputation: 2584

Well, you can use a panel with two panels and each panel containing three buttons.

You can use table or column layouts, or hbox layout to align them into columns.

For example: 

Ext.create("Ext.Panel", {
   items: [{ 
        layout: {
          type: 'hbox',
          align: 'stretch'
        },
        items: [b1, b2, b3] // buttons should have a width or flex specified
   }, { 
        layout: {
          type: 'hbox',
          align: 'stretch'
        },
        items: [b4, b5, b6]
   }]
});

You can place this panel in toolbar as an item.

Take a look at the layouts and examples here

Upvotes: 1

Related Questions