搭建简单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.1srclocale下），最后需要把整个样式表文件夹找到，在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,  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({
                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({
                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({
        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);