Ext2.0.2经典的一个JS组件(带EXT中文手册)
作者:姚海啸 来源:Yaohaixiao’s Blog 发布时间:2009-04-13 12:24:00
官方网站:http://www.extjs.com/
演示地址:http://www.yaohaixiao.com/effects/samples/ext2/docs/index.html
下载地址:http://www.yaohaixiao.com/effects/source/ext-2.0.2.rar (包含中文手册哦)
部分中文说明:
无论你是Ext库的新手,抑或是想了解Ext的人,本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些JavaScript经验和初级了解HTML Dom。
我们将使用Ext,来完成一些JavaScript任务。
Zip文件包括三个文件:ExtStart.html, ExtStart.js和ExtStart.css。解包这三个文件到Ext的安装目录中(例如,Ext是在“C:\code\Ext\v1.0”中,那应该在”v1.0″里面新建目录“tutorial”。双击ExtStart.htm,接着你的浏览器打开启动页面,应该会有一条消息告诉你配置已完毕。如果是一个Javascript错误,请按照页面上的指引操作。
在你常用的IDE中或文本编辑器中,打开ExtStart.js看看:
Ext.onReady可能是你接触的第一个方法。这个方法是指当前DOM加载完毕后,保证页面内的所有元素能被Script引用(reference)。你可删除alert()那行,加入一些实际用途的代码试试:
Ext.onReady(function() {
alert(”Congratulations! You have Ext configured correctly!”);
});
Element:Ext的核心
大多数的JavaScript操作都需要先获取页面上的某个元素(reference),好让你来做些实质性的事情。传统的JavaScript方法,是通过ID获取Dom节点的:
var myDiv = document.getElementById(’myDiv’);
这毫无问题,不过这样单单返回一个对象(DOM节点),用起来并不是太实用和方便。为了要用那节点干点事情,你还将要手工编写不少的代码;另外,对于不同类型浏览器之间的差异,要你处理起来可真头大了。
进入Ext.element 对象。元素(element)的的确确是Ext的心脏地带,–无论是访问元素(elements)还是完成一些其他动作,都要涉及它。Element的 API是整个Ext库的基础,如果你时间不多,只是想了解Ext中的一两个类的话,Element一定是首选!
由ID获取一个Ext Element如下(首页ExtStart.htm包含一个div,ID名字为“myDiv”,然后,在ExtStart.js中加入下列语句):
Ext.onReady(function() {var myDiv = Ext.get(’myDiv’);});
再回头看看Element对象,发现什么有趣的东东呢?
Element包含了常见的DOM方法和属性,提供一个快捷的、统一的、跨浏览器的接口(若使用Element.dom的话,就可以直接访问底层DOM的节点。);
Element.get()方法内置缓存处理(Cache),多次访问同一对象效率上有极大优势;
内置常用的DOM节点的动作,并且是跨浏览器的定位的位置、大小、动画、拖放等等(add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop)。
这意味着你可用少量的代码来做各种各样的事情,这里仅仅是一个简单的例子(完整的列表在ElementAPI中)。
继续在ExtStart.js中,在刚才我们获取好myDiv的位置中加入:
myDiv.highlight(); //黄色高亮显示然后渐退
myDiv.addClass(’red’); // 添加自定义CSS类 (在ExtStart.css定义)
myDiv.center(); //在视图中将元素居中
myDiv.setOpacity(.25); // 使元素半透明
猜你喜欢
- 如何正确理解MIME类型?mime联系介绍。序号内容类型文件扩展名描述1application/msworddocMicrosoft Wor
- 这个只是一个简单的比较无聊的尝试,类似blog等一些网站的换肤功能都是以此方式改变网站的皮肤。对于这些方法大家会的比较多,没啥说的。主要我是
- 今天在一个QQ群中看到有人在问一个进度条的实现方式,当时因为工作时间,需求相对也比较紧,只是简单的说了一下可以通过CSS的边框属性和背景属性
- Union 与 Union ALL 的作用都是合并 SELECT 的查询结果集,那么它们有什么不同呢? Union 将查询到的结果集合并后进
- CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色、大小、距离等静
- 之前有写过一篇浏览器的tab设计,这回说说网站的tab设计。一说到tab很自然地就想到了导航、信息架构。随着网站信息结构的复杂化,选择tab
- 阅读上一片:微软建议的ASP性能优化28条守则(1)技巧 3:将数据和 HTML 缓存在 Web 服务器的磁盘上有时,数据可能太多,无法都缓
- 用XMLHTTP Post Form时的表单乱码有两方面的原因——Post表单数据时中文乱码;服务器Response被XMLHTTP不正确编
- 其实所有的死锁最深层的原因就是一个:资源竞争。表现一:一个用户A 访问表A(锁住了表A),然后又访问表B
- 目前绝大多数手机都支持WAP 2.0。WAP 2.0的页面设计具有更好的视觉效果,更接近网页。不过由于手机千差万别,手机浏览器的能力也各不相
- 我在Web服务器端安装了Web Server IIS4.0、Oracle Net8 for Client,并创建好了和Oracle8数据库的
- 雅虎的BrowserPlus在曝光了N久后终于发布了,一款类似于Google Gears的浏览器增强插件。在支持的操作系统方面,Gears明
- Oblog4.6 ACCESS版转换为UCenterHome1.5的全过程1、 说明:
- 如果让一个ASP页面以https开始,则在该ASP页面最顶部添加如下代码: <%Response.Buffer =
- 在Web 开发中,JavaScript的一个很重要的作用就是对DOM进行操作,可你知道么?对DOM的操作是非常昂贵的,因为这会导致浏览器执行
- 代码如下: public function fillzero(l1) if len(l1)=1 then fillzero="0&
- 到目前为止,我已经开发了两个HTML编辑器了,一个用在公司的CMS项目,另一个用在这个Blog(TidyEditor,暂时没有单独发布)。下
- 我在用 ASP 写一个数据库的应用的时候,总是被那些看起来好好的SQL语句执行起来产生的错误代码搞得头疼,请问有没有更好的解决办法啊?有,我
- Oracle 数据库启动Oracle shutdown的时候突然断电,导致使用sql/plus启动时无法连接到数据库,具体描述为: conn
- 一. 10句话1.不要依赖register_global=ON的环境,从你刚懂得配置php运行环境甚至尚不明白register_global