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'); } } ]});?运行结果：
下面是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 } ]} ?