CODEWITHSUNDEEP
javascriptextjsextjs6
David
David

Reputation: 4281

How to place the textfield item in extJS tabfield

How to place the textfield item in extJS tabfield.

I ahve requirment of textfield which i want to place on extJS textfield. here is the image.

enter image description here

Now below is my code. Tabs are comig fine but not able to see extJS textfield. anything specific which i am missing here,

{   
            xtype : "panel",
            region: 'center',
            floatable: false,
            margin: '0 0 0 0',
            cls: 'tabpanel-common ',
            items:[{
                xtype: 'tabpanel',
                items: [{
                    xtype: 'panel',
                    title: "panel 1",
                    
                    items: []
                   
                },{
                    xtype: 'panel',
                    title: "Panel2",
                    items: []
                   
                },{
                    xtype: 'panel',
                    title: "panel3",
                    items: []
                   
                },{
                    xtype: 'panel',
                    title: "panel4",
                    items: []
                   
                },{
                    xtype: 'tbfill'
                },{
                    xtype: 'textfield',
                   // itemId: 'buttonItemId',
                    text: 'Button',
                    hidden: false,
                    padding: '3px',
                    title: "Search",
                    margin: '2px 5px 5px 2px',
                }]
            }],
            
            listeners: {
                boxready: 'boxready',
                scope: 'controller'
            },
        }

Upvotes: 0

Views: 107

Answers (1)

Arthur Rubens
Arthur Rubens

Reputation: 4706

You can use tabBar config prop:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.tab.Panel', {
            height: 400,
            renderTo: document.body,
            tabBar: {
                items: [{
                    xtype: 'tbfill'
                }, {
                    xtype: 'textfield',
                    triggers: {
                        search: {
                            cls: 'x-form-search-trigger',
                            handler: function () {
                                console.log('Search trigger is clicked', this.getValue());
                            }
                        }
                    }
                }]
            },
            items: [{
                title: 'Foo',
                html: "FOO"
            }, {
                title: 'Bar',
                html: "BAR"
            }]
        });
    }
});

Upvotes: 1

Related Questions