Textfield oraz button w tej samej linii Ext JS 4

Textfield oraz button w tej samej linii Ext JS 4

Cześć, w tym artykule pokażę ci jak ustawić komponenty w tej samej linii.

Końcowy rezultat wygląda następująco:

31-extjs4

Krok 1: dodaj elementy do 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'
                            }
                        ]
                    }
                ]
            }

Rezultat powyższego kodu wygląda następująco:

30-extjs4

Ale to jeszcze nie działa..

Krok 2: ustaw layout

Jeśli chcesz wypozycjonować horyzontalnie swoje elementy kontenera powinieneś ustawić layout na “hbox”. Możesz również odwrócić pionowo poprzez “vbox” i dzięki temu elemnty będą ułożone kolejno w dół, więc w tym przypadku ustawiamy “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'
                            }
                        ]
                    }
                ]
            }

To wszystko. Dzięki i do później.

Komentarze:

Zostaw odpowiedź

Proszę wypełnij wymagane pola aby dodać komentarz.


Drag circle to the rectangle on the right!

Wyślij