使用Ext 创建树

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_30247307

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ZJ199012/p/4184592.html

本文介绍如何利用Ext.js的API创建动态窗口和树结构，包括窗口的基本配置、按钮监听、创建树面板的方法及操作。

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>

View Code

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