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

本文介绍了一个使用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">
<!-- 引入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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值