如何在ExtJS tabpanel的标签栏中放置textfield组件并正常显示

问题原因 #

你把tbfill和textfield错误放在了tabpanel的根items数组中，该数组仅用于存放标签页对应的面板组件，不会渲染到顶部标签栏区域。要在标签栏插入自定义组件，需要将组件配置放到tabpanel的tabBar.items属性下。

修正后代码示例 #

{   
    xtype : "panel",
    region: 'center',
    floatable: false,
    margin: '0 0 0 0',
    cls: 'tabpanel-common ',
    items:[{
        xtype: 'tabpanel',
        // 新增tabBar配置，自定义标签栏内容
        tabBar: {
            items: [
                // tbfill 占位，把后续组件挤到标签栏右侧
                { xtype: 'tbfill' },
                {
                    xtype: 'textfield',
                    emptyText: '搜索', // 输入框用emptyText设置占位提示，text是按钮专属配置
                    hidden: false,
                    padding: '3px',
                    margin: '2px 5px 5px 2px',
                    width: 180 // 建议指定固定宽度，避免输入框自适应过宽
                }
            ]
        },
        items: [{
            xtype: 'panel',
            title: "panel 1",
            items: []
        },{
            xtype: 'panel',
            title: "Panel2",
            items: []
        },{
            xtype: 'panel',
            title: "panel3",
            items: []
        },{
            xtype: 'panel',
            title: "panel4",
            items: []
        }]
    }],
    listeners: {
        boxready: 'boxready',
        scope: 'controller'
    },
}

补充说明 #

• tabBar是ExtJS TabPanel专门用来配置标签栏属性的参数，其内部的items数组会在默认生成的标签页标题之后追加自定义组件
• 原代码中给textfield设置的text、title属性无效，这两个是按钮/面板的专属配置，输入框无需设置
• 如果需要把自定义组件放在标签栏左侧，调整tbfill和textfield的前后顺序即可

内容的提问来源于stack exchange，提问作者David