如何将文本字段项放在 extJS 选项卡字段中答案

【问题标题】：How to place the textfield item in extJS tabfield如何将文本字段项放在 extJS 选项卡字段中
【发布时间】：2021-10-26 11:04:15
【问题描述】：

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

我需要我想放置在 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'
            },
        }

【问题讨论】：

标签： javascript extjs extjs6

【解决方案1】：

你可以使用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"
            }]
        });
    }
});

【讨论】：