EXT入门详解.docVIP

EXT学习文档 ------ext-1.1部分原创/部分整理 第一章 EXT入门 1.1 Ext简介 Ext在最开始的时候，是作为YUI的一个扩展存在的，所以那个时候它的名称是YUI.Ext，后来，Ext作为一个独立的项目进行开发，并不再依赖于YUI 如果你未曾下载过，那应从这里下载最新版本的Ext /downloads。针对你的下载需求，有几个不同的版本。通常地，最稳定的版本，是较多人的选择。最新的版本是Ext2.0，本教程使用 下载解包后，example下是些实例文件进行学习。 在EXT目录中， 开发所必要的文件已经拷贝到项目中啦，以上导入操作今后不再提示。 接下来该编写代码啦Ext.onReady(function() { Ext.get(mb1).on(click, function(e){ Ext.MessageBox.alert(提示, ); }); }); （5）在根目录建立hello.htm,内容是： html head script type=text/javascript src=js/ext-base.js/script script type=text/javascript src=js/ext-all.js/script link rel=stylesheet type=text/css href=css/ext-all.css script type=text/javascript src=js/hello.js/script /head body input type=button id=mb1 value=点击我 /body /html 我们双击打开hello.htm页面，单击点击我按钮，你可以看弹出对话筐，效果如下： Ext的界面很漂亮，可以替换传统的AlertExt.get(mb1).on()那行，加入一些实际用途的代码试试： Ext.onReady(function() { ..............  }); 其中Ext.get(mb1).on()函数为页面中名称是mb1的元素注册事件,这个例子中是个Button input type=button id=mb1 value=点击我 Ext.get(mb1).on(click, function(){.....}) 也许你会觉察到我们并没有导入html head script type=text/javascript src=js/ext-base.js/script script type=text/javascript src=js/ext-all.js/script link rel=stylesheet type=text/css href=css/ext-all.css link rel=stylesheet type=text/css href=css/xtheme-vista.css script type=text/javascript src=js/hello.js/script /head body input type=button id=mb1 value=点击我 /body /html 双击该页面，单击点击我按钮,你会看到如下vista样式的效果 还有其他的样式效果，可以根据自己喜欢选择。 xtheme-aero.css xtheme-gray.css 默认风格 第二章 Ext的核心 2.1获取获取通常情况下，不能由ID获取多个DOM的节点，有可能因为没设置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。这种情况下，你会不用ID来作为获取元素的依据，可能会用属性（attribute）或CSS Classname代替。基于以上的原因，Ext引入了一个功能异常强大的Dom Selector库，叫做DomQueryDomQuery可作为单独的库使用，但常用于Ext，你可以在上下文环境中（Context）获取多个元素，然后通过Element接口调用。幸运的是，Element对象本身便有Element.selcect的方法来实现查询，即内部调用DomQuery选取元素。想轻松地通过一次操作马上获取每一段p标签，全体执行它们的动作，可以这样做// 每段高亮显示Ext.select(p).highlight(); DomQuery的选取参数是一段较长的数组，其中包括W3C CSS3 Dom选取器、基本XPatch、HTML属性和更多，请参阅DomQuery API文档以了解这功能强大的库的细节。onReady