How to place the textfield item in extJS tabfield

Question

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.

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'
            },
        }

Answer 1

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"
            }]
        });
    }
});