1、ExtJS入门

最新推荐文章于 2025-05-22 10:16:38 发布

yan咩

最新推荐文章于 2025-05-22 10:16:38 发布

阅读量561

点赞数 1

CC 4.0 BY-SA版权

分类专栏： EXTJS 文章标签： extjs

本文链接：https://blog.csdn.net/yanmiemie/article/details/52264178

EXTJS 专栏收录该内容

8 篇文章

订阅专栏

搭建环境

下载Ext发布包

www.extjs.com/download

辅助工具

开发利器Spket

Spket是一款全面支持javascript、XUL/XBL、Flex、SVG以及Yahoo！Widget的免费开发工具。

下载：http://www.spket.com
如何将Spket作为Eclipse的插件来使用：
- 将spket下载包中Eclipse文件复制到Eclipse的安装目录下的dropins文件夹中
- 然后启动Eclipse，依次进入Windows–>Preferences选项，在窗口的左边可以看到Spket菜单项，选中JavaScript Profiles选项，在右边点击new选项，命名为ExtJS
- 选中创建的ExtJS，点击右边的Add Library，选择ExtJS
- 选择ExtJS下的文件，然后Add File，添加解压后的ExtJS，选择ext.jsb文件并打开，然后把所有的勾打上，确定完成。

注意：js文件打开方式一定要选择Spket JavaScript Editor
这里写图片描述

快速入门

把ext-3.4.1解压后copy到项目中

这里写图片描述

创建web项目ng-extjs，在WebContent下创建hello.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello-ExtJS</title>
<!-- 第一步引入Ext的样式文件 -->
<link type="text/css" rel="stylesheet"
    href="ext-3.4.1/resources/css/ext-all.css"></link>
<!-- 引入Ext库文件，底层驱动 -->
<script src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<!-- 引入ext-all -->
<script src="ext-3.4.1/ext-all.js"></script>
<script>
    function showWindow() {
        //创建一个窗口
        var o = {
            width : 500,
            height : 400,
            title : "第一个窗口",
            buttons : [ {
                text : "确定"
            }, {
                text : "取消"
            } ]
        };
        var win = new Ext.Window(o);
        win.show();
    }
    function showTree() {
        var tree = new Ext.tree.TreePanel({
            title : "树的测试",
            width : 500,
            height : 300,
            root : new Ext.tree.AsyncTreeNode({
                text : "树的根节点",
                children : [ {
                    text : "子节点1",
                    children : [ {
                        text : "孙节点1",
                        leaf : true
                    } ]
                }, {
                    text : "子节点2",
                    leaf : true
                } ]
            })
        });
        tree.on("render", function() {
            alert("树节点显示了")
        });
    }
    //通过Ext。onReady来开始调用Ext组件
    Ext.onReady(showWindow);
</script>
</head>
<body>
</body>
</html>

执行结果如下：
这里写图片描述

知识点解析

在HTML页面中需要导入以下代码：

<!-- 第一步引入Ext的样式文件 -->
<link type="text/css" rel="stylesheet"
    href="ext-3.4.1/resources/css/ext-all.css"></link>
<!-- 引入Ext库文件，底层驱动 -->
<script src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<!-- 引入ext-all -->
<script src="ext-3.4.1/ext-all.js"></script>