一、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>//语言包 |
<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);