Panels、Windows和TabPanel

4、Panels、Windows和TabPanel

Panels、TabPanels及Windows都是ExtJS常用的容器组件。

4.1、Ext.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.2、Ext.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.3、Ext.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
        }
    ]
}