`

Panels、Windows和TabPanel

阅读更多

4PanelsWindowsTabPanel

PanelsTabPanelsWindows都是ExtJS常用的容器组件。

4.1Ext.Panel程序例子

下面是一个典型的Panel的应用。通过阅读这个例子,你可以对Panel容器组件的使用有一个较为完整的了解:

var myBtnHandler = function(btn) {
    Ext.MessageBox.alert('You Clicked', btn.text);
}
var fileBtn =  new Ext.Button({
    text    : 'File',
    handler : myBtnHandler
});
var editBtn = new Ext.Button({
    text    : 'Edit',
    handler : myBtnHandler
});
var tbFill = new Ext.Toolbar.Fill();
var myTopToolbar = new Ext.Toolbar({
    items : [
        fileBtn,
        tbFill,
        editBtn
    ]
});
var myBottomToolbar = [
    {
        text    : 'Save',
        handler : myBtnHandler
    },
    '-',
    {
        text    : 'Cancel',
        handler : myBtnHandler
    },
    '->',
    '<b>Items open: 1</b>',
];
var myPanel = new Ext.Panel({
    width       : 200,
    height      : 150,
    title       : 'Ext Panels rock!',
    collapsible : true,
    renderTo    : Ext.getBody(),
    tbar        : myTopToolbar,
    bbar        : myBottomToolbar,
    html        : 'My first Toolbar Panel!',
    buttons     : [
        {
            text    : 'Press me!',
            handler : myBtnHandler
        }
    ],
    tools       : [
        {
            id      : 'gear',
            handler : function(evt, toolEl, panel) {
                var toolClassNames = toolEl.dom.className.split(' ');
                var toolClass      = toolClassNames[1];
                var toolId         = toolClass.split('-')[2];
               
                Ext.MessageBox.alert('You Clicked', 'Tool ' + toolId);
            }
        },
        {
            id      : 'help',
            handler : function() {
                Ext.MessageBox.alert('You Clicked', 'The help tool');
            }
        }
    ]
});
 

运行结果:


4.2Ext.Window应用例子

下面是Exit.Window容器组件的应用例子,注意其中的animateTarget : btn.el属性的使用,通过这个属性,可以以动感的方式打开窗口:

var win;
var newWindow = function(btn) {
    if (! win) {
        win = new Ext.Window({
            animateTarget : btn.el,      //注意这句的作用
            html          : 'My first vanilla Window',
            closeAction   : 'hide',
            id            : 'myWin',
            height        : 200,
            width         : 300,
            constrain     : true
        });
    }
    win.show();
}
new Ext.Button({
    renderTo : Ext.getBody(),
    text     : 'Open my Window',
    style    : 'margin: 100px',
    handler  : newWindow
});
 

运行结果:


再看一个配置相对比较多的Ext.Window组件使用的例子:

var win = new Ext.Window({

    height      : 75,
    width       : 200,
    modal       : true,
    title       : 'This is one rigid window',
    html        : 'Try to move or resize me. I dare you.',
    plain       : true,
    border      : false,
    resizable   : false,
    draggable   : false,
    closable    : false,
    buttonAlign : 'center',
    buttons     : [
        {
            text    : 'I give up!',
            handler : function() {
                win.close();
            }
        }
    ]
})
win.show();
 

4.3Ext.TabPanel应用例子

TabPanel的例子:

var simpleTab = {
    title : 'My first tab',
    html  : 'This is my first tab!'
}
var closableTab = {
    title    : 'I am closable',
    html     : 'Please close when done reading.',
    closable : true
}
var disabledTab = {
    title    : 'Disabled tab',
    id       : 'disabledTab',
    html     : 'Peekaboo!',
    disabled : true,
    closable : true
}
var tabPanel = new Ext.TabPanel({
    activeTab         : 0,
    id                : 'myTPanel',
    //layoutOnTabChange : true,
    enableTabScroll   : true,
    items             : [
        simpleTab,
        closableTab,
        disabledTab,
    ]
});
new Ext.Window({
    height : 300,
    width  : 400,
    layout : 'fit',
    items  : tabPanel
}).show();
Ext.getCmp('myTPanel').unhideTabStripItem('disabledTab');
 
//以下为两个新的TabPanel的对象
var embeddedTabPanel = {
    title     : 'My second tab',
    closable  : true,
    xtype     : 'tabpanel',
    activeTab : 0,
    items     : [
        {
            title : 'Inner tab 1'
        },
        {
            title : 'Inner tab 2'
        }
    ]
}
var complexTab = {
    title    : 'A Complex tab',
    layout   : 'border',
    defaults : {
        frame : true,
        split : true
    },
    items  : [
        {
            html   : 'Center Panel',
            region : 'center'
        },
        {
            html   : 'North Panel',
            region : 'north',
            height : 25
        },
        {
            html   : 'West Panel',
            region : 'west',
            height : 25
        }
    ]
}
 
 
  • 大小: 20.7 KB
  • 大小: 6.8 KB
分享到:
评论

相关推荐

    treepanel 和 tabpanel 完整

    在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    TabPanel是ExtJS提供的一种布局管理器,它允许在一个容器中创建多个面板(Panels),每个面板有自己的标签,用户可以通过点击标签在不同的面板间切换。TabPanel可以方便地管理和展示大量的内容,尤其适合于构建复杂...

    ExtJS TabPanel 标签操作

    在本主题中,我们将深入探讨如何操作ExtJS的TabPanel,包括创建、添加、删除和切换标签页,以及自定义菜单等高级功能。 首先,让我们了解TabPanel的基本结构。在ExtJS中,TabPanel是一个容器,可以包含多个Panel...

    TabPanel选卡结合右键菜单实例

    在网页设计中,TabPanel常用于减少页面的拥挤感,提高信息的组织性和可读性。jQuery库因其简洁的API和强大的DOM操作能力,成为实现这种功能的理想选择。 在"TabPanel选卡结合右键菜单实例"中,我们关注的是如何将...

    extjs4.2.1 tabPanel刷新及关闭标签

    在版本4.2.1中,`TabPanel`提供了丰富的API和方法来控制其行为,如刷新当前标签页、关闭特定标签页等。 #### 刷新当前标签页 在ExtJS 4.2.1中,要实现刷新当前标签页的功能,可以采用以下方式: ```javascript ...

    ExtJS扩展:垂直页签tabPanel

    首先,我们看到有两个JavaScript文件,TabPanel.js和TabPanel2.js。TabPanel.js可能是基础的TabPanel类,而TabPanel2.js可能包含了垂直页签的扩展或改进。在ExtJS中,扩展通常用于添加新功能或改变现有组件的行为。...

    ExtJS tabPanel实例

    在实际开发中,`tabPanel` 经常被用来组织和展示复杂的信息。 `tabPanel` 的基本用法包括以下几个方面: 1. 创建 `tabPanel`: 要创建一个 `tabPanel`,你需要先定义一个 `Ext.container.TabPanel` 实例。在...

    Extjs4.2 设置tabpanel当前活动页签的样式

    Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...

    TabPanel 加载页面

    `TabPanel`提供了更好的组织和导航功能,使得用户可以更高效地浏览和操作复杂的应用程序。 `TabPanel`的实现方式多种多样,常见的有HTML/CSS/JavaScript、Java Swing、.NET WinForms、WPF以及各种Web框架如ASP.NET...

    TabPanel效果,比较有用,收藏先。

    在IT行业中,TabPanel是一种常见的用户界面元素,广泛应用于各种应用程序和网页设计中。它用于组织和展示多个视图或面板,每个面板通常包含不同的内容,用户可以通过点击不同的标签在这些面板之间切换。这个...

    基于jquery的tabpanel

    基于jquery的tabpanel,支持动态添加,支持滚动条,可内嵌iframe,支持关闭按钮,支持tab的背景图片配置, 这个是我在网上找到一个原始的版本,然后修改的,有详细注释,写了11个使用例子,基本涵盖了该组件的功能。...

    TabPanel 选项卡

    【标题】"TabPanel 选项卡"是一种常见的网页设计元素,用于组织和展示多个相互关联的内容区域。在网页设计中,TabPanel 提供了一种整洁、高效的方式,让用户通过点击不同的标签来切换显示不同的信息板块,提高用户...

    ext的tabpanel的激活与注意事项

    在EXTJS应用中,tabpanel提供了灵活的布局管理和用户交互功能,使开发者能够构建高效且直观的多面板应用。本篇文章将深入探讨EXTJS中tabpanel的激活操作及其注意事项。 首先,我们来看tabpanel的激活操作。在EXTJS...

    Ext中TabPanel的动态页面加载

    总结,EXT JS的`TabPanel`支持动态页面加载,通过设置`lazy`属性和监听`tabchange`事件,我们可以实现在`Tab`被激活时按需加载内容,有效提高了应用性能。结合`ComponentLoader`或Ajax请求,可以灵活地加载HTML内容...

    如何在MATLAB中做出标签页的效果-tabpanel2.6.zip

    这时候等侯一下,会出现一个运行的figure和一个小面板,在面板上有几项分别是(从上到下从左到右)添加标签、编辑标签、更新标签、当前标签前移、当前标签后移、设置、信息。这是点击第一个,就可以添加标签页了,...

    Ext.TabPanel

    TabPanel的使用,添加tab,加载页面,添加事件

    javascritp+css+tabpanel的实现

    在这个“javascript+css+tabpanel的实现”中,我们将深入探讨如何使用HTML、JavaScript和CSS来创建一个功能完备且交互友好的Tab Panel系统。 首先,HTML是构建页面结构的基础。Tab Panel的基本HTML结构通常包括一个...

    TabPanel

    至于`tabAdv.doc`和`TabCloseMenu.js`这两个文件,它们可能是关于`TabPanel`的高级功能或特定实现的文档和脚本。`tabAdv.doc`可能包含了更深入的使用指南、示例代码或者自定义功能的介绍,如支持右键关闭选项卡、...

    Ext中的tabpanel关闭后再打开不显示的问题

    通过以上两种方法——调整`autoDestroy`和`closeAction`属性——我们可以有效地解决Ext中`TabPanel`关闭后再打开不显示的问题。这些技巧不仅能够提升用户体验,还能够在复杂的业务场景下提供更加灵活的界面管理方案...

Global site tag (gtag.js) - Google Analytics