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
}
]
}