1、ExtJS入门

搭建环境

下载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
1、ExtJS入门_第1张图片

快速入门

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

1、ExtJS入门_第2张图片

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


<html>
<head>
<meta charset="UTF-8">
<title>Hello-ExtJStitle>

<link type="text/css" rel="stylesheet"
    href="ext-3.4.1/resources/css/ext-all.css">link>

<script src="ext-3.4.1/adapter/ext/ext-base.js">script>

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

执行结果如下:
1、ExtJS入门_第3张图片

知识点解析

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


<link type="text/css" rel="stylesheet"
    href="ext-3.4.1/resources/css/ext-all.css">link>

<script src="ext-3.4.1/adapter/ext/ext-base.js">script>

<script src="ext-3.4.1/ext-all.js">script>

你可能感兴趣的:(EXTJS,extjs)