如何在Sencha Ext JS及移动端应用的页面/面板中显示双标签页并设置默认激活

嘿，我来帮你搞定这两个Sencha标签页的实现需求，都是开发中很常见的场景，直接上实操代码和简单解释：

在Ext JS里，我们主要用Ext.tab.Panel组件来实现标签页功能，下面是一个完整的示例，你可以直接放到你的项目里测试：

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    title: 'Ext JS 标签页示例',
    layout: 'fit', // 让tabpanel占满父面板空间
    items: [{
        xtype: 'tabpanel',
        items: [
            {
                title: '标签页一',
                html: '<p>这是第一个标签页的内容</p>'
            },
            {
                title: '标签页二',
                html: '<p>这是第二个标签页的内容</p>'
            }
        ]
    }]
});

关键说明：

• 父面板用layout: 'fit'可以让内部的tabpanel自动填满整个面板区域，避免布局错乱
• xtype: 'tabpanel'是核心组件，所有标签页都作为它的items配置项存在
• 每个标签页通过title设置顶部显示的标签文字，html配置内容区域的展示内容

移动端的Sencha应用（不管是用Ext JS Modern Toolkit还是Sencha Touch），标签页的实现逻辑类似，只是我们需要通过activeTab配置指定默认激活的标签页。这里以Ext JS Modern为例：

Ext.create('Ext.tab.Panel', {
    fullscreen: true, // 移动端常用fullscreen占满屏幕
    activeTab: 1, // 默认激活第二个标签页（索引从0开始）
    items: [
        {
            title: '首页',
            iconCls: 'home', // 移动端标签页常用图标，需要提前引入图标库
            html: '<p>首页内容区域</p>'
        },
        {
            title: '我的',
            iconCls: 'user',
            html: '<p>个人中心内容区域</p>'
        }
    ]
});

关键说明：

• activeTab可以设置为标签页的索引（比如1对应第二个标签），也可以设置为标签页的itemId，比如给第二个标签加itemId: 'profileTab'，然后activeTab: 'profileTab'，这样更易维护
• 移动端标签页通常会搭配iconCls设置底部/顶部的图标，提升用户体验
• fullscreen: true让标签页面板直接占满整个移动设备屏幕，适合移动端页面布局

这样配置下来，不管是桌面端还是移动端的标签页需求都能轻松实现，有细节问题可以再探讨哦！

内容的提问来源于stack exchange，提问作者Arun B Krishnegowda