`
huoquan
  • 浏览: 27164 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类

ExtJs4 笔记之Ext.tab.Panel 选项卡

阅读更多

本篇讲解选项卡控件。

一、基本选项卡

首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取:

1.基本方式:通过定义html和items的方式。

2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。

3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。

另外,每个tab都可以设置是否可关闭,进入tab时的事件,以及tab是否可用,具体情况请看代码:可以500%提高开发效率的前端UI框架!

<h1>基本选项卡</h1> 
<div class="content" style="height: 150px">
    <div id="tabPanel">
        <div style="display: none">
            <div id="oneTab">
                <p>这个tab所展示的内容是读取至其他HTML标签</p>
            </div>
        </div>
    </div>
 
//1.基本的选项卡
var tabs1 = Ext.createWidget('tabpanel', {
    renderTo: "tabPanel",
    activeTab: 1,                       //指定默认的活动tab
    width: 600,
    height: 120,
    plain: true,                        //True表示tab候选栏上没有背景图片(默认为false)
    enableTabScroll: true,              //选项卡过多时,允许滚动
    defaults: { autoScroll: true },
    items: [{
        id: "tab1",
        title: '普通Tab',
        html: "这只是一个非常普通的Tab。",
        items:[{xtype:'button',text:'按钮'}],
        closable: true                  //这个tab可以被关闭
    }, {
        id: "tab2",
        title: '内容来至div',
        contentEl: 'oneTab'             //指定了当前tab正文部分从哪个html元素读取
    }, {
        id: "tab3",
        title: 'Ajax Tab',
        autoLoad: { url: 'AjaxTabContent', params: { data: "从客户端传入的参数" }, method: 'GET' }
    }, {
        id: "tab4",
        title: '事件Tab',
        listeners: { activate: handleActivate },
        html: "带事件的Tab。"
    }, {
        id: "tab5",
        title: '不可用Tab',
        disabled: true,
        html: "不可用的Tab,你是看不到我的。"
    }]
});
//单击tab4后触发的事件
function handleActivate(tab) {
    alert(tab.title + ': activated事件触发。');
}
 

我们查看一下生成的选项卡效果:可以500%提高开发效率的前端UI框架!

二、操作选项卡

选项卡生成后,我们可以通过js去操作它,比如动态新增、删除、插入选项卡,设置活动选项卡等,我们看看具体实现方法:

<h1>操作选项卡</h1>

 

 

var index = 0;
   
//新增一个Tab
Ext.createWidget("button", {
    text: "新增一个Tab",
    renderTo: 'content2',
    handler: function () {
        tabs1.add({
            title: '新Tab ' + (++index),
            id: "newTab" + index,
            html: '选项卡文本部分 ' + (index) + '<br/><br/>',
            closable: true
        });
    }
});
   
//插入一个Tab
Ext.createWidget("button", {
    text: "在2号位置插入新Tab",
    renderTo: 'content2',
    handler: function () {
        tabs1.insert(2, {
            title: '新Tab ' + (++index),
            id: "newTab" + index,
            html: '选项卡文本部分 ' + (index) + '<br/><br/>',
            closable: true
        });
    }
});
   
//删除一个Tab
Ext.createWidget("button", {
    text: "删除2号位置的Tab",
    renderTo: 'content2',
    handler: function () {
        tabs1.remove(2);
    }
});
   
//删除id为“tab1”的Tab
Ext.createWidget("button", {
    text: "删除id为“tab1”的Tab",
    renderTo: 'content2',
    handler: function () {
        tabs1.remove("tab1");
    }
});
   
//删除id为“tab1”的Tab
Ext.createWidget("button", {
    text: "设置第三个Tab为活动tab",
    renderTo: 'content2',
    handler: function () {
        tabs1.setActiveTab(2);
    }
 

效果:可以500%提高开发效率的前端UI框架!

三、选项卡按钮在下方

默认的选项卡按钮在上方,我们可以随意定义选项卡按钮的位置,下面代码演示了具体的用法:

<h1>选项卡按钮在下方</h1>

 

 

//选项卡按钮在下方
var tabs3 = Ext.createWidget('tabpanel', {
    renderTo: "content3",
    activeTab: 0,
    width: 600,
    height: 150,
    tabPosition: 'bottom'           //指定了选项卡的位置,left,right
});
for (var i = 0; i < 3; i++)
    tabs3.add({
        title: 'Tab ' + i,
        id: "Tabs3_" + i,
        html: '选项卡文本部分 ' + (index) + '<br/><br/>',
        closable: true
 

效果:

四、可拖动的选项卡

通过官方扩展包我们可以增强选项卡控件的易用性,比如现在我们可以实现一个可以拖动选项卡按钮的功能:

<h1>可拖动的选项卡</h1>

 

 

//首先要动态加载ux扩展的js
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');
Ext.require([
    'Ext.tip.QuickTipManager',
    'Ext.tab.Panel',
    'Ext.ux.TabScrollerMenu',
    'Ext.ux.TabReorderer',
    'Ext.ux.TabCloseMenu',
    'Ext.ux.GroupTabPanel'
]);
   
   
//以下是功能代码
   
    //可拖动的选项卡
    var tabs4 = Ext.createWidget('tabpanel', {
        renderTo: "content4",
        activeTab: 0,
        width: 600,
        height: 150,
        plugins: Ext.create('Ext.ux.TabReorderer'),
        items: [{
            xtype: 'panel',
            title: 'tab不可拖',
            html: "这个选项卡不可被拖动",
            reorderable: false,
            closable: true
        }]
    });
    for (var i = 0; i < 3; i++)
        tabs4.add({
            title: 'Tab ' + i,
            id: "Tabs4_" + i,
            html: '选项卡文本部分 ' + (index) + '<br/><br/>'
 

 

效果如下,可见一个tab已经被移动:

五、过多选项卡的菜单式展示

如果面板上的选项卡打开的过多而显示不下,那么需要对溢出的选项卡用菜单的方式展示出来,实现方式如下,注意要引入扩展的css样式: 可以500%提高开发效率的前端UI框架!

<h1>过多选项卡的菜单式展示</h1>

 

 

//选项卡过多溢出时菜单显示
var tabs5 = Ext.createWidget('tabpanel', {
    renderTo: "content5",
    activeTab: 0,
    width: 600,
    height: 150,
    plugins: Ext.create('Ext.ux.TabScrollerMenu', {
        maxText: 15,
        pageSize: 5
    }),
    items: [{
        title: 'tab0',
        html: '第一个tab'
    }]
});
Ext.defer(function () {
    var myTabs = [];
    for (var i = 0; i < 15; i++) {
        myTabs.push({
            title: 'Tab ' + i,
            id: "Tabs5_" + i,
            html: '选项卡文本部分 ' + (index) + '<br/><br/>'
        });
    }
    tabs5.add(myTabs);
}, 1000);
 

效果:

六、选项卡的右键菜单

一般的应用程序都支持在选项卡按钮上面通过右键的方式去关闭多余的选项卡,在ext中也可以做到,实现方法如下:

<h1>选项卡的右键菜单</h1>
<div class="content" id="content6"></div>

 

 

//选项卡的右键菜单
var currentItem;
var tabs6 = Ext.createWidget('tabpanel', {
    renderTo: "content6",
    activeTab: 0,
    width: 600,
    height: 150,
    plugins: Ext.create('Ext.ux.TabCloseMenu', {
        closeTabText: '关闭当前',
        closeOthersTabsText: '关闭其他',
        closeAllTabsText: '关闭所有',
        extraItemsTail: [
                    '-',
                    {
                        text: '可关闭',
                        checked: true,
                        hideOnClick: true,
                        handler: function (item) {
                            currentItem.tab.setClosable(item.checked);
                        }
                    }
                ],
        listeners: {
            aftermenu: function () {
                currentItem = null;
            },
            beforemenu: function (menu, item) {
                var menuitem = menu.child('*[text="可关闭"]');
                currentItem = item;
                menuitem.setChecked(item.closable);
            }
        }
    }),
    items: [{
        title: 'tab1',
        html: '第一个tab'
    }, {
        title: 'tab2',
        closable: true,
        html: '第二个tab'
    }, {
        title: 'tab3',
        closable: true,
        html: '第三个tab'
    }]
});
 

效果:

七、分组式选项卡

我们还可以对选项卡进行分组,具体实现如下:可以500%提高开发效率的前端UI框架!

<h1>分组式选项卡</h1>
<div class="content" id="content7"></div>

 

 

//分组式选项卡
var tabs7 = Ext.create('Ext.ux.GroupTabPanel', {
    activeGroup: 0,             //设置当前活动的分组
    items: [{
        expanded: false,
        mainItem: 1,            //设置主要的item,这个tab会在最上面,以文件夹方式展示出来。
        items: [{
            title: '项目1',
            html: "<b>第一组第一项正文。</b>"
        }, {
            title: '项目2',
            border: false,
            html: "<b>第一组第二项正文。</b>"
        }, {
            title: '项目3',
            border: false,
            html: "<b>第一组第三项正文。</b>"
        }]
    }, {
        expanded: true,
        items: [{
            title: '项目1',
            html: "<b>第二组第一项正文。</b>"
        }, {
            title: '项目2',
            html: "<b>第二组第二项正文。</b>"
        }]
    }]
});
Ext.create('Ext.Panel', {
    renderTo: "content7",
    width: 600,
    height: 250,
    collapsible: true,
    layout: 'fit',
    title: '分组tab演示',
    items: tabs7
});
 

效果:

0
0
分享到:
评论

相关推荐

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    extJs 2.1学习笔记

    18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) ...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    总结来说,这个实例展示了如何将前端的ExtJS4框架,特别是其Accordion布局和Ext.tree.Panel组件,与Servlet和Struts2后端框架集成,利用JSON进行数据交换,来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...

    ExtJS 3.4.0中的 ext.jsb2 文件

    在ExtJS 4中,构建过程被重新设计,引入了新的构建系统,如使用`app.json`代替`ext.jsb2`。`app.json`包含了关于应用结构和依赖的信息,使得构建过程更加灵活和可配置。然而,由于`ext.jsb2`在4.0.0中不存在,如果你...

    ExtJS ToolTip功能

    var grid = Ext.create('Ext.grid.Panel',{ title:'ArrayGrid', store:store, ... }); ``` 创建了一个`Ext.grid.Panel`实例,并指定了其标题和数据源。 5. **选择模型**: ```javascript selModel:{ type...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    综上所述,ExtJS 4.x的ComboboxTree组件是实现下拉树形菜单的强大工具,它结合了下拉框的简洁和树结构的层次感,提供了丰富的定制选项,能满足多种场景下的需求。理解并熟练掌握其用法,将极大地提升开发效率和用户...

    extjs 可编辑的表格树 Ext.tree.ColumnTree Ext.tree.ColumnTreeEditor

    extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    ExtJs提供了Ext.Ajax.request方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制,我们可以采用Ext.MessageBox的...

    extjs4.x tabpanel 动态加载panel和html例子

    Ext.create('Ext.tab.Panel', { renderTo: Ext.getBody(), // 将tabpanel渲染到body activeTab: 0, // 默认选中的tab layout: 'fit', // 使用fit布局,使得panel完全填充tabpanel items: [] }); ``` 2. **...

    extjs4.1-ux.rar

    1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid....

    extJs+2.1学习笔记.pdf

    15. **extJs 2.0 学习笔记(Ext.Panel终结篇)** Panel是构建UI的基本组件,涵盖了布局、标题、工具栏等多种功能。掌握Panel的使用和配置,能创建复杂而灵活的界面。 16. **extJs 2.0 学习笔记(事件注册总结篇)*...

    Ext.ux.UploadDialog.zip

    对于初次接触EXTjs UploadDialog的开发者来说,理解EXT的组件体系结构、事件模型和配置选项是非常重要的。 通过"UploadDialog"这个压缩包,你可以获取到EXTjs的上传对话框组件,将其整合到你的项目中,快速实现文件...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    ### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...

    Ext.Ajax.request2.x实现同步请求

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

    如何给Ext.panel增加一个背景图片

    如何给Ext.panel增加一个背景图片

    ExtJs4_笔记.docx

    - **Ext.tab.Panel**:详细讲解了选项卡的创建和操作。 - **Ext.ListView**和**Ext.view.View**:数据视图的实现。 - **Ext.toolbar.Toolbar**、**Ext.toolbar.Paging**和**Ext.ux.statusbar.StatusBar**:工具栏、...

    Extjs6.x插件,双击关闭选项卡(js源码)

    在EXTJS 6.x 中,`Ext.Tab.Panel` 是一个常用的组件,用于创建带有选项卡的布局,每个选项卡代表一个独立的视图或窗口。 在EXTJS 4.x 中,存在一种常见的用户交互模式,即双击选项卡来关闭该选项卡。然而,随着...

    ExtJS 4.0 改善Ext.grid.plugin.RowEditing (重构,v1.4版本,2011-09-11)

    ExtJS是一个流行的JavaScript库,专用于构建富客户端应用程序。它提供了丰富的组件库,包括表格、表单、树形视图等。在4.0版本中,ExtJS对RowEditing插件进行了重大改善,以提供更好的数据编辑体验。RowEditing插件...

Global site tag (gtag.js) - Google Analytics