N天学习EXT.docVIP

学习EXT第一天:EXT简介 作者: Frank　来源: /article.asp?id　标签:extjs dom javascript (English) 【大 中 小】 原文出处 翻译：Frank 无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和初级了解HTML Dom。否则的话，请从阅读初学JavaScript资源开始。 下载Ext 如果你未曾下载过，那应从这里下载最新版本的Ext /downloads。 针对你的下载需求，有几个不同的弹性选项。通常地，最稳定的版本，是较多人的选择。下载解包后，那个example文件夹便是一个探索Ext的好地方！ 开始！ 我们将使用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); // 使元素半透明 获取多个DOM的节点 通常情况下，不能由ID获取多个DOM的节点，有可能因为没设置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这种情况下，你会不用ID来作为获取元素的依据，可能会用属性（attr