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

最新推荐文章于 2021-08-24 15:35:54 发布

转载最新推荐文章于 2021-08-24 15:35:54 发布 · 123 阅读

文章标签：

#javascript #java #ViewUI

本文介绍了一个使用ExtJS库创建简单窗口和树形组件的例子。通过具体的代码实现展示了如何加载ExtJS库并使用其内置功能来构建用户界面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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