搭建简单Ext

一、EXT是什么？

1. Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验；

2. Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中；

3. Ext是面向对象的；

4. Ext没有你想象中的那么难；

二、Ext从哪里获取？

http://www.sencha.com/products/extjs/download 从这里下载最新的正式版压缩包，我下的是3.4.0的。

解压后有58M大小，里面包含了很多其他的文档。

三、Ext环境怎么搭建？

我们只需要从里面找出自己需要的文件即可。按照顺序在根目录下找到ext-all.js（最主要的Ext代码库文件），然后在adapter/ext/目录下找到ext-base.js（EXT的适配器），接下来就需要找语言文件了名字叫“ext-lang-zh_CN.js”（在ext-3.4.1\src\locale下），最后需要把整个样式表文件夹找到，在resources文件夹中（我是把整个resources文件夹复制过来的）。把所有找到的文件全部复制到我们需要的文件夹下，暂定为Ext文件夹。

四、Ext代码怎么写？

接下来我们一起来写一个测试例子，因为是JS库，所以网页中要做的第一件事情就是添加引用，在需要用到Ext的页面源文件头部加上：

<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> <!--引入样式 -->

<script type="text/javascript" src="Ext/ext-base.js"></script> <!--引入适配器 -->

<script type="text/javascript" src="Ext/ext-all.js"></script> <!--引入主文件 -->

<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> <!-- 语言包 -->

<script type="text/javascript">

　　function start(){

　　　　Ext.MessageBox.alert("测试","看我漂亮不!");

　　}

　　Ext.onReady(start); //所有的程序都是从这里开始执行，里面写函数名

</script>

五、弹出窗体

<HTML>

<HEAD>

<TITLE>弹出窗体</TITLE>

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

<script type="text/javascript" src="Ext/ext-base.js"></script>

<script type="text/javascript" src="Ext/ext-all.js"></script>

<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>

</HEAD>

<script type="text/javascript">

    function start(){

        //创建窗体对象，同时传入相应的参数。常见的参数有标题(title)，高(height)，宽(width)，内容(html)等。这些参数全部用花括弧括起来，各个参数中间用英文逗号隔开。说明：其中html属性是可以写和解析html标签的，可以在里面修饰字体等。

        var win = new Ext.Window({ title: "测试标题", height: 300, width: 500, html: "<h1>测试内容</h1>" });

        //调用他的show()方法,让这个窗体对象显示出来

        win.show();

    }

    Ext.onReady(start);//程序入口

</script>

<BODY>

</BODY>

</HTML>

项目里使用

<!DOCTYPE html>

<html>

  <head>

    <title>hello-extjs</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <!-- 引入extjs样式文件 -->

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

    <!-- 引入extjs库文件，底层驱动 -->

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

    <!-- 引入extjs-all -->

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

    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->

    <script type="text/javascript" src="app.js"></script>

    <script type="text/javascript">

        /*

        function showWindow(){

            //创建一个窗口

            var win=new Ext.Window({

                width:500,

                height:400,

                title:"第一个窗口",

                buttons:[{text:"确定"},{text:"取消"}]

            });

            //显示窗口

            win.show();

        }

        //通过Ext.onReady来开始调用ext组件

        Ext.onReady(showWindow);

        //Ext.onReady(function(){showWindow()});

        /*

        Ext.onReady(function(){

            //创建一个窗口

            var win=new Ext.Window({

                width:500,

                height:400,

                title:"第一个窗口",

                buttons:[{text:"确定"},{text:"取消"}]

            });

            //显示窗口

            win.show();

        });

        */

    </script>

  </head>

  <body>

    This is my HTML page. <br>

     <div id="hello"></div>

  </body>

</html>

/**

 *

 */

function showWindow(){

    //创建一个窗口

    var win=new Ext.Window({

        width:500,

        height:400,

        title:"第一个窗口",

        buttons:[{text:"确定"},{text:"取消"}]

    });

    //显示窗口

    win.show();

}

function shwoTree(){

     var tree = new Ext.tree.TreePanel({

        el:'hello'

    });

    var root = new Ext.tree.TreeNode({text:'根结点'});

    var node1 = new Ext.tree.TreeNode({text:'子结点1'});

    var node2 = new Ext.tree.TreeNode({text:'孙结点1',leaf:true});

    var node3 = new Ext.tree.TreeNode({text:'子结点2',leaf:true});

    //使用appendChild()为一人结点添加子结点

    node1.appendChild(node2);

    root.appendChild(node1);

    root.appendChild(node3);

    tree.setRootNode(root);

    tree.render();

    //没有root.expand(true, true);就每次都要点击根或枝前面的加号才能展开整棵树。

    //root.expand(true, true);第一个参数表示是否递归展开所有子结点，如果为false，就只展开第一级子结点，下面的结点仍然是折叠状态。第二个参数表示是否要动画效果，如果为true可以明显看出这些结点是逐渐展开的。

    root.expand(true, true);

    /*

     var tree=new Ext.tree.TreePanel(function(){

        root:new Ext.tree.AsyncTreeNode({

            text:"根结点",

            children:[

                {

                    text:"子结点1",

                    children:[{text:"孙结点1",leaf:true}]

                },

                {text:"子结点2",leaf:true}

            ]

        })

    });

    tree.on("render",function(){

        alert("树节显示了");

    })

    tree.render("hello");

    */

}

//通过Ext.onReady来开始调用ext组件

//Ext.onReady(showWindow);

Ext.onReady(shwoTree);

巴特西

搭建简单Ext

二、Ext从哪里获取？

三、Ext环境怎么搭建？

四、Ext代码怎么写？

五、弹出窗体

最新文章

热门文章