使用ExtJS实现左侧Tab

在Web开发中，Tab组件常被用于实现页面的多标签导航功能。ExtJS是一款功能强大的JavaScript框架，提供了丰富的UI组件，其中包括TabPanel组件，可以简化我们实现左侧Tab导航的过程。

1. 创建TabPanel

首先，我们需要创建一个TabPanel组件作为容器，用来承载Tab标签页。以下是一个示例代码：

Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    width: 800,
    height: 600,
    items: [{
        title: '首页',
        iconCls: 'x-fa fa-home',
        html: '欢迎访问首页！'
    }, {
        title: '产品列表',
        iconCls: 'x-fa fa-list',
        html: '这里显示产品列表！'
    }, {
        title: '关于我们',
        iconCls: 'x-fa fa-info',
        html: '这是我们的公司简介！'
    }]
});

上述代码中，我们创建了一个TabPanel组件，并将其渲染到页面的body中。设置了宽度和高度，以及一些Tab标签页的配置信息，包括标题、图标和内容。

2. 添加Tab标签页

接下来，我们可以动态地添加或删除Tab标签页。以下是一个示例代码：

var tabPanel = Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    width: 800,
    height: 600
});

tabPanel.add({
    title: '首页',
    iconCls: 'x-fa fa-home',
    html: '欢迎访问首页！'
});

tabPanel.add({
    title: '产品列表',
    iconCls: 'x-fa fa-list',
    html: '这里显示产品列表！'
});

tabPanel.add({
    title: '关于我们',
    iconCls: 'x-fa fa-info',
    html: '这是我们的公司简介！'
});

上述代码中，我们首先创建了一个空的TabPanel组件，然后通过调用add方法向TabPanel中添加Tab标签页。调用add方法时，传入一个配置对象，其中包含Tab标签页的标题、图标和内容。

3. 关闭Tab标签页

有时，我们可能需要关闭某个Tab标签页。可以通过监听TabPanel的beforeclose事件来实现。以下是一个示例代码：

var tabPanel = Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    width: 800,
    height: 600,
    listeners: {
        beforeclose: function(panel) {
            return confirm("确定要关闭此标签页吗？");
        }
    }
});

tabPanel.add({
    title: '首页',
    iconCls: 'x-fa fa-home',
    html: '欢迎访问首页！'
});

tabPanel.add({
    title: '产品列表',
    iconCls: 'x-fa fa-list',
    html: '这里显示产品列表！'
});

tabPanel.add({
    title: '关于我们',
    iconCls: 'x-fa fa-info',
    html: '这是我们的公司简介！'
});

上述代码中，在TabPanel组件的配置对象中添加了一个listeners属性，用于监听beforeclose事件。当用户关闭某个Tab标签页时，会触发该事件，并在函数中返回一个布尔值，用于确认用户的操作。

4. 自定义样式

为了美化左侧Tab导航，我们可以自定义样式。以下是一个示例代码：

.x-tab-tabpanel .x-tab-bar {
    background-color: #f2f2f2;
}

.x-tab-tabpanel .x-tab-bar-body {
    padding-top: 5px;
}

.x-tab-tabpanel .x-tab-bar .x-tab-bar-inner {
    border: none;
}

.x-tab-header .x-tab-bar .x-tab-bar-body {
    padding-left: 10px;
}

.x-tab-header .x-tab-bar .x-tab-bar-body.x-tab-bar-strip-over .x-tab-bar-inner {
    background-color: #ffffff;
}

.x-tab-header .x-tab-bar .x-tab-bar-body .x-tab-bar-inner {
    background-color: #f2f2f2;
}

上述代码中，我们使用CSS选择器来选中TabPanel的不同部分，并设置相应的样式。可以自由调整背景色、字体样式等来美化左侧Tab导航。

结语

使用ExtJS实现左侧Tab导航非常方便，只需简单的几行代码就能完成。通过添加、关闭Tab标签页，我们可以动态地管理和展示内容。自定义样式可以进一步提升用户体验。希望本文对你有所帮助！