一、EXT是什么&＃xff1f;
1. Ext是一个Ajax框架&＃xff0c;可以用来开发带有华丽外观的富客户端应用&＃xff0c;使得我们的b/s应用更加具有活力及生命力&＃xff0c;提高用户体验&＃xff1b;
2. Ext是一个用Javascript编写&＃xff0c;与后台技术无关的前端ajax框架。因此&＃xff0c;可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中&＃xff1b;
3. Ext是面向对象的&＃xff1b;
4. Ext没有你想象中的那么难&＃xff1b;
二、Ext从哪里获取&＃xff1f;
http://www.sencha.com/products/extjs/download 从这里下载最新的正式版压缩包&＃xff0c;我下的是3.4.0的。
解压后有58M大小&＃xff0c;里面包含了很多其他的文档。
三、Ext环境怎么搭建&＃xff1f;
我们只需要从里面找出自己需要的文件即可。按照顺序在根目录下找到ext-all.js&＃xff08;最主要的Ext代码库文件&＃xff09;&＃xff0c;然后在adapter/ext/目录下找到ext-base.js&＃xff08;EXT的适配器&＃xff09;&＃xff0c;接下来就需要找语言文件了名字叫“ext-lang-zh_CN.js”&＃xff08;在ext-3.4.1\src\locale下&＃xff09;&＃xff0c;最后需要把整个样式表文件夹找到&＃xff0c;在resources文件夹中&＃xff08;我是把整个resources文件夹复制过来的&＃xff09;。把所有找到的文件全部复制到我们需要的文件夹下&＃xff0c;暂定为Ext文件夹。
四、Ext代码怎么写&＃xff1f;
接下来我们一起来写一个测试例子&＃xff0c;因为是JS库&＃xff0c;所以网页中要做的第一件事情就是添加引用&＃xff0c;在需要用到Ext的页面源文件头部加上&＃xff1a;
| //引入样式 //引入适配器 //引入主文件 //语言包 |
<link rel&＃61;"stylesheet" type&＃61;"text/css" href&＃61;"Ext/resources/css/ext-all.css" />
<script type&＃61;"text/Javascript" src&＃61;"Ext/ext-base.js">script>
<script type&＃61;"text/Javascript" src&＃61;"Ext/ext-all.js">script>
<script type&＃61;"text/Javascript" src&＃61;"Ext/ext-lang-zh_CN.js" charset&＃61;"utf-8">script>
<script type&＃61;"text/Javascript">
function start(){Ext.MessageBox.alert("测试","看我漂亮不!");}Ext.onReady(start); //所有的程序都是从这里开始执行&＃xff0c;里面写函数名
script>
五、弹出窗体
<HTML>
<HEAD>
<TITLE>弹出窗体TITLE>
<link rel&＃61;"stylesheet" type&＃61;"text/css" href&＃61;"Ext/resources/css/ext-all.css" />
<script type&＃61;"text/Javascript" src&＃61;"Ext/ext-base.js">script>
<script type&＃61;"text/Javascript" src&＃61;"Ext/ext-all.js">script>
<script type&＃61;"text/Javascript" src&＃61;"Ext/ext-lang-zh_CN.js" charset&＃61;"utf-8">script>
HEAD>
<script type&＃61;"text/Javascript"> function start(){ //创建窗体对象&＃xff0c;同时传入相应的参数。常见的参数有标题(title)&＃xff0c;高(height)&＃xff0c;宽(width)&＃xff0c;内容(html)等。这些参数全部用花括弧括起来&＃xff0c;各个参数中间用英文逗号隔开。说明&＃xff1a;其中html属性是可以写和解析html标签的&＃xff0c;可以在里面修饰字体等。var win &＃61; new Ext.Window({ title: "测试标题", height: 300, width: 500, html: "测试内容
" }); //调用他的show()方法,让这个窗体对象显示出来
win.show(); } Ext.onReady(start);//程序入口
script>
<BODY>
BODY>
HTML>
项目里使用
DOCTYPE html>
<html><head><title>hello-extjstitle><meta http-equiv&＃61;"keywords" content&＃61;"keyword1,keyword2,keyword3"><meta http-equiv&＃61;"description" content&＃61;"this is my page"><meta http-equiv&＃61;"content-type" content&＃61;"text/html; charset&＃61;UTF-8"><link rel&＃61;"stylesheet" type&＃61;"text/css" href&＃61;"ext-3.4.1/resources/css/ext-all.css" /><script type&＃61;"text/Javascript" src&＃61;"ext-3.4.1/adapter/ext/ext-base.js">script><script type&＃61;"text/Javascript" src&＃61;"ext-3.4.1/ext-all.js">script><script type&＃61;"text/Javascript" src&＃61;"app.js">script><script type&＃61;"text/Javascript">/*function showWindow(){//创建一个窗口var win&＃61;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&＃61;new Ext.Window({width:500,height:400,title:"第一个窗口",buttons:[{text:"确定"},{text:"取消"}]});//显示窗口win.show();});*/script>head><body>This is my HTML page. <br><div id&＃61;"hello">div>body>
html>
/*** */
function showWindow(){//创建一个窗口var win&＃61;new Ext.Window({width:500,height:400,title:"第一个窗口",buttons:[{text:"确定"},{text:"取消"}]});//显示窗口
win.show();
}function shwoTree(){var tree &＃61; new Ext.tree.TreePanel({el:&＃39;hello&＃39;});var root &＃61; new Ext.tree.TreeNode({text:&＃39;根结点&＃39;});var node1 &＃61; new Ext.tree.TreeNode({text:&＃39;子结点1&＃39;});var node2 &＃61; new Ext.tree.TreeNode({text:&＃39;孙结点1&＃39;,leaf:true});var node3 &＃61; new Ext.tree.TreeNode({text:&＃39;子结点2&＃39;,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);第一个参数表示是否递归展开所有子结点&＃xff0c;如果为false&＃xff0c;就只展开第一级子结点&＃xff0c;下面的结点仍然是折叠状态。第二个参数表示是否要动画效果&＃xff0c;如果为true可以明显看出这些结点是逐渐展开的。root.expand(true, true);/*var tree&＃61;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);
京公网安备 11010802041100号