Ext.Window和Ext.tree.TreePanel简单用法

<% @ page language = " java " import = " java.util.* " pageEncoding = " UTF-8 " %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + " :// " + request.getServerName() + " : " + request.getServerPort() + path + " / " ;
%>

<! 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 >