以下就是ExtJs的官方示例,只不过加了几行注释,呵
<
html
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > Hello World Window Example </ title >
< link rel ="stylesheet" type ="text/css" href ="../resources/css/ext-all.css" />
< script type ="text/javascript" src ="../adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="../ext-all-debug.js" ></ script >
< style type ="text/css" >
.x-panel-body p {
margin : 10px ;
font-size : 12px ;
}
</ style >
</ head >
< body >
< script type ="text/javascript" >
Ext.onReady( function () {
var win;
var button = Ext.get( ' show-btn ' );
button.on( ' click ' , function () {
if ( ! win) {
win = new Ext.Window({
applyTo: ' Container ' ,
layout: ' fit ' , // fit布局会使容器内的组件自动充满容器(Resize容器时,自动重绘)
// title:"new Title",//不加这一句时,会自动寻找Container中样式为x-window-header的div,将其内容做为window的title
width: 500 ,
height: 300 ,
closeAction: ' hide ' , // 关闭后,仅隐藏,方便下次再显示
plain: true ,
items: new Ext.TabPanel({
applyTo: ' hello-tabs ' ,
autoTabs: true , // 加上这个后,会在hello-tabs里自动寻找样式为x-tab的div,根据title标识创建tab,根据div内容创建tab内容
activeTab: 0 ,
deferredRender: false ,
border: false
}),
buttons: [{
text: ' Submit ' ,
disabled: true
}, {
text: ' Close ' ,
handler: function () {
win.hide();
}
}]
});
}
win.show(button); // 注意win.show()与win.show(button)的区别,show(button)会使弹出窗口看起来象从button上弹出来的,具有动画效果,而win.show()则没有这一动画效果
});
});
</ script >
< input type ="button" id ="show-btn" value ="Hello World" />< br />< br />
< div id ="Container" class ="x-hidden" >
< div class ="x-window-header" > Hello Dialog </ div >
< div id ="hello-tabs" >
< div class ="x-tab" title ="Hello World 1" >
< p > Hello </ p >
</ div >
< div class ="x-tab" title ="Hello World 2" >
< p > World! </ p >
</ div >
</ div >
</ div >
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > Hello World Window Example </ title >
< link rel ="stylesheet" type ="text/css" href ="../resources/css/ext-all.css" />
< script type ="text/javascript" src ="../adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="../ext-all-debug.js" ></ script >
< style type ="text/css" >
.x-panel-body p {
margin : 10px ;
font-size : 12px ;
}
</ style >
</ head >
< body >
< script type ="text/javascript" >
Ext.onReady( function () {
var win;
var button = Ext.get( ' show-btn ' );
button.on( ' click ' , function () {
if ( ! win) {
win = new Ext.Window({
applyTo: ' Container ' ,
layout: ' fit ' , // fit布局会使容器内的组件自动充满容器(Resize容器时,自动重绘)
// title:"new Title",//不加这一句时,会自动寻找Container中样式为x-window-header的div,将其内容做为window的title
width: 500 ,
height: 300 ,
closeAction: ' hide ' , // 关闭后,仅隐藏,方便下次再显示
plain: true ,
items: new Ext.TabPanel({
applyTo: ' hello-tabs ' ,
autoTabs: true , // 加上这个后,会在hello-tabs里自动寻找样式为x-tab的div,根据title标识创建tab,根据div内容创建tab内容
activeTab: 0 ,
deferredRender: false ,
border: false
}),
buttons: [{
text: ' Submit ' ,
disabled: true
}, {
text: ' Close ' ,
handler: function () {
win.hide();
}
}]
});
}
win.show(button); // 注意win.show()与win.show(button)的区别,show(button)会使弹出窗口看起来象从button上弹出来的,具有动画效果,而win.show()则没有这一动画效果
});
});
</ script >
< input type ="button" id ="show-btn" value ="Hello World" />< br />< br />
< div id ="Container" class ="x-hidden" >
< div class ="x-window-header" > Hello Dialog </ div >
< div id ="hello-tabs" >
< div class ="x-tab" title ="Hello World 1" >
< p > Hello </ p >
</ div >
< div class ="x-tab" title ="Hello World 2" >
< p > World! </ p >
</ div >
</ div >
</ div >
</ body >
</ html >