Textfield and button in the same line Ext JS 4

Textfield and button in the same line Ext JS 4

Hi, in this article I will show you how to set components in the same line.

 

The final result look like the following picture:

31-extjs4

Step 1: add items to the fieldcontainer

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

The code result look like the following picture:

30-extjs4

The final results not arrived yet..

Step 2: set layout

If you want to arrange items horizontally across a Container you should use “hbox” configuration. You can also use “vbox” to set all items vertically down, so in this case we will use “hbox”:

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

That’s it. Thanks and see you soon.

Comments:

Leave a Reply

Please fill all required fields


Drag circle to the rectangle on the right!

Send