学步园

<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>


<
html
>


<
head
>


<
base
href
="<%=basePath%>"
>

<
title
>
Ext入门
</
title
>


<
meta
http-equiv
="pragma"
content
="no-cache"
>


<
meta
http-equiv
="cache-control"
content
="no-cache"
>


<
meta
http-equiv
="expires"
content
="0"
>


<
meta
http-equiv
="keywords"
content
="keyword1,keyword2,keyword3"
>


<
meta
http-equiv
="description"
content
="This is my page"
>


<!--
引入ExtJS样式文件
-->


<
link
rel
="stylesheet"
type
="text/css"
href
="<%=request.getContextPath() %>/ext-3.2.0/resources/css/ext-all.css"
/>


<!--
引入ExtJS脚本库(两个，一个驱动adapter,另外一个ext-all.js)
-->


<
script
type
="text/javascript"
src
="<%=request.getContextPath() %>/ext-3.2.0/adapter/ext/ext-base.js"
></
script
>


<
script
type
="text/javascript"
src
="<%=request.getContextPath() %>/ext-3.2.0/ext-all.js"
></
script
>


<
script
type
="text/javascript"
>

//
显示窗口



function
showWin(){

//
创建一个窗口



var
win
=
new
Ext.Window({
width:
500
,
height:
400
,
title:
"
第一个窗口
"
,
buttons: [
{
text:
"
确定
"

},{
text:
"
取消
"

}
]
});
win.show();
}

//
显示树



function
showTree(){

//
组件初始化过程



var
tree
=
new
Ext.tree.TreePanel({
width:
200
,
height:
200
,
title:
"
我是一棵树
"
,
root:
new
Ext.tree.AsyncTreeNode({
text:
"
树根
"
,
children: [{
text:
"
叶子1
"
,
children: [{
text:
"
叶子11
"
,
leaf:
true

}]
}, {
text:
"
叶子2
"
,
leaf:
true

}]
})
});

tree.on(
"
render
"
,
function
(){
alert(
"
树节点显示了
"
);
});

//
组件渲染


tree.render(Ext.getBody());
}

//
通过Ext.onReady来开始调用Ext组件


Ext.onReady(
function
(){

//
showWin();


showTree();
});

</
script
>


</
head
>

<
body
>

</
body
>


</
html
>