本文使用的是ext-2.0-beta1 版,大家可以到http://www.extjs.com 自行下载,不要告诉我你找不到下载链接, 呵呵. 不过 本文并没有涉及到与服务器的异步交互,请大家见谅。
我下载的是完整的ZIP 包, 里面包括了帮助文档和一些例子,关于帮助文档的查看, 必须使用虚拟目录的形式来查看, 下面仅对tomcat 服务器举例说明( 也可以IIS 下建立虚拟目录) :
tomcat 下有多种方法建立虚拟目录, 比如改server.xml 、把文件放到webapps 目录下等方法,我这里使用最简单的方法,直接把解压出来的文件放到了 webapps/ext 文件夹下,这样的话,启动服务器后,直接在地址栏输入http://localhost:8080/ext/docs 就可以进入帮助文档了。输入http://localhost:8080/ext/examples 即可查看ext 自带的案例,里面包含了许多非常酷案例.
好了,现在进入正题, 这次要带大家用EXT 做一个锁屏的特效,也就是当点击某个按钮的时候, 浏览器的屏幕会被一层半透明的色块锁住。当然,这个效果用普通JS 也能做。这里仅仅是让大家了解EXT 框架的使用方法:
OK,Start :
前面我已经把完整包里的文件解压出来放到 webapps/ext 文件夹下了,根目录里有四个JS 文件,其中-debug 结尾的是开发调试时使用的,本例中仅使用到了ext-all.js 文件。
1. 在此文件夹中建立一个demo 文件夹,在demo 文件夹中分别建立三个文件:demo.js , demo.html , demo.css
2. demo.html 的代码如下,html 页面的代码相对简单,容易理解:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>demo</title> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="../ext-all.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> // 按钮,给它取一个ID <input type="button" id="myButton" value="My Button" /> // 用于锁屏的层,具体的样式定义在demo.css 中 // 在没有点击按钮时,设置它的display 属性为none, 即不显示该层 <div id="screen" class="screen" style="display:none;"></div> </body> </html> |
3. demo.css
.screen{ top:0; left:0; position:absolute; background-color: #5e4c0f; FILTER:alpha(opacity=60); } |
4. demo.js 代码,内含详细的解释, 每个方法的具体说明请查看帮助文档
// 直接使用Ext 类,注意不是Ext 包,具体结构请查看文档 // 使用Ext 类的onReady() 方法,此方法用于初始化,为其它JS 代码作准备 Ext.onReady(function() {
// 调用Ext 的get 方法用于得到页面中的一个element ,将会返回Element 类型的对象 // 与document.getElementById("") 的功能相同 var myButton = Ext.get("myButton"); var screens = Ext.get("screen");
// 调用Element 对象( 此处是myButton) 的on 方法,用处是单击按钮后显示锁屏层 // 关于Element 对象的其它更多方法见Ext 包中的Element 类 myButton.on("click",function(){ // Ext.getBody() 得到当前浏览器对象 //getHeight(),getWidth() 方法得到宽和高 var screen_height = Ext.getBody().getHeight(); var screen_width = Ext.getBody().getWidth(); // 给screens 设置样式属性,并让它显示出来 screens.setStyle("height",screen_height); screens.setStyle("width",screen_width); screens.setStyle("display","block"); });
// 初始化关闭按钮, screens.insertHtml("beforeEnd", "<input type='button' style='height:30px;width:80px;font-size:18px;' id='closeScreenButton' value=' 关 闭'>",false);
// 单击关闭按钮, 关闭锁屏 var closeScreenButton = Ext.get("closeScreenButton"); closeScreenButton.on("click",function(){ var screens = Ext.get("screen"); screens.setStyle("display","none"); }); }); |
OK, 锁屏和解屏的都有了,原理很简单,这只是Ext 的一点点小功能,还有更强的功能,大家有兴趣可以慢慢研究,小弟在此抛砖引玉,希望大家有更好的文章分享。