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,