How to align elements in Ext JS 4 toolbar to right?

How to align elements in Ext JS 4 toolbar to right?

Hi, in this article I will show you how you can adjust your components in Ext JS 4 toolbar. In my case I have a grid with users and I will add to the toolbar simple textfield (filter).

 

The final result look like the following picture:

29-extjs4

How you can do that? Here’s the answer:

           {
                xtype: 'toolbar',
                dock: 'top',
                items: [
                    {
                        xtype: 'button',
                        text: 'Add user'
                    },
                    {
                      xtype: 'tbfill'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Filter by login'
                    }
                ]
            }

 

The Ext.toolbar.Fill a non-rendering placeholder item. It’s something like an empty Component tbfill with a flex = 1 configuration, simply filled the space between a toolbar elements. It’s something like that:

            {
                xtype: 'toolbar',
                dock: 'top',
                items: [
                    {
                        xtype: 'button',
                        text: 'Add user'
                    },
                    {
                      xtype: 'container',
                      flex: 1
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Filter by login'
                    }
                ]
            }

Thanks and see you soon.

Comments:

Leave a Reply

Please fill all required fields


Drag circle to the rectangle on the right!

Send