EXT(js)教程(0积分下载)

《EXT(js)教程(0积分下载)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Ext简介Ext简介Ext简介Ext简介Ext简介Ext简介Ext简介Ext简介Ext简介Ext简介Ext简介我们将讲讲怎么使用Ext，来完成一些JavaScript常见的任务。如果你想自己试试，就应该先下IntroToExt2.zip，用来构建已下面的Ext代码。Zip包里有三个文件：ExtStart.html,ExtStart.js和ExtStart.css。解包这三个文件到Ext的安装目录中（例如，Ext是在“C:codeExtv2.0”中，那应该在"v2.0"里面新建目录“tutorial”。双击ExtStart.htm，接着你的浏览器打开启动页面，应该会有一条消息告

2、诉你配置已完毕。如果出现了Javascript错误，请按照页面上的指引操作。现在在你常用的IDE中或文本编辑器中，打开ExtStart.js看看。Ext.onReady(function(){     alert("Congratulations!YouhaveExtconfiguredcorrectly!");});Ext.onReady可能是你接触的第一个也可能是在每个页面都要使用的方法。这个方法会在DOM加载全部完毕后，保证页面内的所有元素能被Script引用（reference）之后调用。你可删除alert()那行，加入一些实际用途的代码试试。Element：Ext的核心大

3、多数的JavaScript操作都需要先获取页面上的某个元素的引用（reference）,好让你来做些实质性的事情。传统的JavaScript做法，是通过ID获取Dom节点的：varmyDiv=document.getElementById('myDiv');这毫无问题，不过这样单单返回一个对象（DOM节点），用起来并不是太实用和方便。为了要用那节点干点事情，你还将要手工编写不少的代码；另外，对于不同类型浏览器之间的差异，要处理起来可真头大了。进入Ext.element对象。元素（element）的的确确是Ext的心脏地带，--无论是访问元素（elements）还是完成一些其他动作，

4、都要涉及它。Element的API是整个Ext库的基础，如果你时间不多，只是想了解Ext中的一两个类的话，Element一定是首选！由ID获取一个ExtElement如下（首页ExtStart.htm包含一个div，ID名字为“myDiv”，然后，在ExtStart.js中加入下列语句）：ThecorrespondingcodetogetanExtElementbyIDlookslikethis(thestarterpageExtStart.htmlcontainsadivwiththeid"myDiv,"sogoaheadandaddthiscodetoExtStart.js):

5、Ext.onReady(function(){     varmyDiv=Ext.get('myDiv');});再回头看看Element对象，发现什么有趣的东东呢？·        Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口（若使用Element.dom的话，就可以直接访问底层DOM的节点。）；·        Element.get()方法提供内置缓存（Cache)，多次访问同一对象效率上有极大优势；·        内置常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等（add/removeCSSclasses,a

6、dd/removeeventhandlers,positioning,sizing,animation,drag/drop）。这意味着你可用少量的代码来做各种各样的事情，这里仅仅是一个简单的例子（完整的列表在ElementAPI文档中）。继续在ExtStart.js中，在刚才我们获取好myDiv的位置中加入：myDiv.highlight();     //黄色高亮显示然后渐退myDiv.addClass('red');//添加自定义CSS类(在ExtStart.css定义)myDiv.center();        //在视图中将元素居中myDiv.setOpacity(.25

7、);//使元素半透明获取多个DOM的节点通常情况下，想获取多个DOM的节点，难以依靠ID的方式来获取。有可能因为没设置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这种情况下，你就会不用ID来作为获取元素的依据，可能会用属性（attribute）或CSSClassname代替。基于以上的原因，Ext引入了一个异常强大的DomSelector库，叫做DomQuery。DomQuery可作为单独的库使用，但常用于Ext，你可以在上下文环境中（Context