Добавить поле ввода в Ext.tab.Panel

Question

Я создаю меню с использованием Ext.tab.Panel и хотел бы иметь функцию поиска.Что-то вроде Bootstrap navbar - https://getbootstrap.com/docs/4.0/components/navbar/

Я пытался просто добавить элемент textfield, но это явно не сработало.

Ext.create('Ext.TabPanel', {
    fullscreen: true,

    items: [{
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        },
        {
            xtype: 'textfield',
            name: 'name',
            fieldLabel: 'Name',
            allowBlank: false // requires a non-empty value
        }
    ]
});

Возможно ли вообще этого добиться?

Answer 1

Вы можете заархивировать его с помощью конфигурации панели вкладок из Ext.tab.Panel. Ext.tab.Bar - это специализированный Ext.container.Container, в который можно добавлять элементы, такие как a, к Textfield.

. Поэтому добавьте текстовое поле поиска в конфигурацию панели вкладок, и вы сможете заархивироватьвы хотите, см. пример кода ниже и Сенча Fiddle .

Ext.create('Ext.TabPanel', {
    fullscreen: true,

    items: [{
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        },
    ],
    tabBar: {
        items: [
            {
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Name',
                allowBlank: false // requires a non-empty value
            }
        ]
    },
    renderTo: Ext.getBody()
});

Answer 2

Сначала этой функциональности нет в панели вкладок, которую я рекомендую вам сделать, и замените идею табульной панели, чтобы применить раскладку карты, которая является той же самой системой расположения вкладок.

И затем вы можете использоватьКороче говоря, на панели инструментов с кнопками, настроенными с помощью toogleGroup, вы можете увидеть приведенный ниже пример кода.

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            renderTo: Ext.getBody(),
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'toolbar',
                height: 42,
                defaults: {
                    xtype: 'button',
                },
                items: [{
                    text: 'Tab1',
                    handler: function(button){
                        var me = this,
                            fakeContainer = button.up('panel').down('#fakeTab');
                        fakeContainer.setActiveItem(button.tabIndex);
                    },
                    tabIndex: 0,
                    toggleGroup: 'tabHandler',
                    enableToggle: true,
                    pressed: true,
                    margin: '0'
                }, {
                    text: 'Tab2',
                    handler: function(button){
                        var me = this,
                            fakeContainer = button.up('panel').down('#fakeTab');
                        fakeContainer.setActiveItem(button.tabIndex);
                    },
                    tabIndex: 1,
                    enableToggle: true,
                    margin: '0'
                }, {
                    text: 'Tab3',
                    handler: function(button){
                        var me = this,
                            fakeContainer = button.up('panel').down('#fakeTab');
                        fakeContainer.setActiveItem(button.tabIndex);
                    },
                    tabIndex: 2,
                    toggleGroup: 'tabHandler',
                    enableToggle: true,
                    margin: '0'
                }, '->', {
                    xtype: 'textfield',
                    fieldLabel: 'Search:',
                    labelWidth: 70,
                    width: 250,
                    margin: 0 
                }, {
                    iconCls: 'x-fa fa-search',
                    handler: function(){
                        alert('Your Search here!');
                    }
                }]
            }, {
                xtype: 'container',
                itemId: 'fakeTab',
                margin: '16 0 0 0',
                flex: 1,
                layout: 'card',
                defaults: {
                    xtype: 'container',
                    height: 800
                },
                items: [{
                    html: '<STRONG>TAB 1 your content here</STRONG>'
                }, {
                    html: '<STRONG>TAB 2 your content here</STRONG>'
                }, {
                    html: '<STRONG>TAB 3 your content here</STRONG>'
                }]
            }]
        });
    }
});

Рабочий пример здесь