ext使用入门实例

lyhapple

浏览: 48716 次
性别:
来自: 北京

最近访客更多访客>>

zhuzipan_3

drizzlewalk

Sit-kevin

liruyan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

EXT CSS Tomcat JavaScript 浏览器

本文使用的是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">

<head>

</head>

<body>

//按钮，给它取一个ID

//用于锁屏的层，具体的样式定义在demo.css中

//在没有点击按钮时，设置它的display属性为none,即不显示该层

</body>

</html>

3. demo.css

.screen{

top:0;

left:0;

position:absolute;

background-color: #5e4c0f;

FILTER:alpha(opacity=60); /*CSS滤境，让背景色产生半透明的效果*/

}

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的一点点小功能，还有更强的功能，大家有兴趣可以慢慢研究，小弟在此抛砖引玉，希望大家有更好的文章分享。

分享到：

Oracle和SQL Server常用函数对比(转) | 工作中遇到的几个Oracle小问题

2008-04-16 10:32
浏览 2854
评论(2)
查看更多

2 楼 AJCF 2012-02-06

能否说下为什么提示ext未定义？我看了相关错误原因但是仍然没有找到，路径没问题。<script type="text/javascript" src="../ext-all.js"></script>

1 楼 passnk 2009-03-25

谢谢了，正在学习使用........

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论