使用Ext 创建树

时间:2023-03-10 00:59:57
使用Ext 创建树

ext使用的是ext3.4.0版本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hello-Ext</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ext/ext-all.js" ></script>
<script type="text/javascript" src="js/win.js" ></script>
<script type="text/javascript" >
/*Ext.onReady(function () {
var win = new Ext.Window({
width: 600,
height: 500,
title: "测试窗口",
buttons: [{ text: "确定" }, {text:"取消"}]
}); win.show();
});*/
</script>
</head>
<body> </body>
</html>

ext创建树的脚本

function ShowWindow() {
//调用button的on方法设置监听函数
var btn = new Ext.Button({
text: "创建一个窗口"
});
btn.on("click", ShowMinWindow); var win = new Ext.Window({
width: 500,
height: 300,
title: "My Ext Window",
maximizable: true,
minimizable: true,
maximize: function () { win.hide(); },
buttons: [{ text: "创建一个带数的窗口",
listeners: {
click: function () {
var tree = new Ext.tree.TreePanel({ width: 500,
height: 300,
title: "树的测试",
root: new Ext.tree.AsyncTreeNode({
text: "子节点1",
children: [{ text: "子节点11", children: [{ text: "子节点111", leaf: true}] }, { text: "子节点2", leaf: true}]
})
}); var w1 = new Ext.Window({
width: 300,
height: 400,
title: "树",
items: [tree]
});
//w1.add(tree);
w1.show();
}
}
}, btn]
});
win.show();
} function ShowMinWindow() {
var win = new Ext.Window({
width:200,
height: 100,
title:"弹出窗口"
});
win.show();
} Ext.onReady(ShowWindow);

效果如下图

使用Ext 创建树