如何将文本字段项目放置在 extJS 选项卡字段中

Question

如何在 extJS tabfield 中放置 textfield 项。

我有一个文本字段的要求，我想把它放在 extJS 文本字段上。这是图片。

下面是我的代码。选项卡很好，但无法看到 extJS 文本字段。我在这里遗漏的任何具体内容，

{   
            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

您可以使用 tabBar 配置属性：

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