您的位置：首页 > 其它

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

2011-06-20 22:33 246 查看

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航