Question

我正在使用Ext.tab.Panel创建菜单，并希望具有搜索功能。像Bootstrap导航栏-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中的tabbar config对其进行存档。 Ext.tab.Bar是专门的Ext.container.Container，您可以在其中将诸如a之类的内容添加到Textfield。

因此，将搜索文本字段添加到标签栏配置中，即可存档所需的内容，请参见下面的示例代码和Sencha 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

首先，此功能在选项卡面板中不存在，建议您这样做，并替换选项卡面板的想法以应用与同一选项卡面板布局系统相同的cardlayout。

然后您可以使用工具栏，并使用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>'
                }]
            }]
        });
    }
});

工作示例here

在Ext.tab.Panel中添加输入字段

2 个答案: