搭建简单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);

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/13257.html

搭建简单Ext详解编程语言

二、Ext从哪里获取？

三、Ext环境怎么搭建？

四、Ext代码怎么写？

五、弹出窗体

相关推荐

发表回复