学习YUI.Ext基础第一天

导言

翻了翻以前的旧贴子，有值得回味的地方共分享：

Post1:

.................
我们现在的大量应用依赖于浏览器（主要是 IE）的脚本处理能力，在有些老机器上跑的时候确实会略显缓慢，但是目前的主流机型处理起来已经没有任何问题了。我们设计了一整套的 Web 开发框架，这套框架将随着应用的锤炼而越来越稳定。JavaScript 用的不好容易造成 IE 的崩溃，我们是靠提高代码的重用度来解决这个问题的，因为重用度越高的代码往往越稳定。 有些眼高手低的人往往凭第一眼印象就把 JavaScript 从整体解决方案中完全忽略，但是我们发现 JavaScript 作为解决方案的表示层是非常有价值的，而且通过几层 DOM 树的映射来解决表示层-逻辑层分离比起使用 MVC 要灵活得多。我们的基本思想就是浏览器-服务器间传输的应该只是数据，如何显示（呈现）由浏览器自己决定。我们的中间件很好地体现了这个思想。MVC 的学习成本也是一个重要的考虑因素。我可以毫不脸红地说我不懂 MVC，但是我们确实解决了客户需要我们解决的问题。
.................

Post2:

.................

通过我们这里一年多来对于 XMLHTTP、JavaScirpt、RIA 等技术和架构的讨论，其实我们最终也可以得到完全相同的结论的。AJAX 的可行性是不容置疑的，已经被我们这里一些勇于实践的开发人员的经验（我的经验，还有很多使用 JS+XMLHTTP+XSLT 的人的经验，给自己的脸上贴点金，呵呵），以及最近的 Google Map 等伟大的应用（体验一下 Google Map 的速度，你就知道我为什么说伟大了）所证实，还证实了基于 Web 标准进行创新是一条光明的大路。我的同事 ly 在三年前就采用了这种开发模式，并且把它的好处介绍给我，我后来又在这里一再宣传使用 JS+XMLHTTP 做开发的好处。因此我对于现在出现的 AJAX 一点也不感到奇怪，只是对于这种开发模式到现在才开始流行感觉有些遗憾。以前国内大部分的开发者只知道一味地迷信 J2EE，迷信 .Net，把自己限制在犬儒式的对大厂的盲从上，而不愿意自己去创新。现在出现的 AJAX 对于国内的开发者是一个启示，也是一个教训。共产主义是等不来的，无论是 M$、IBM 还是 Sun 都不会把共产主义的幸福生活拱手相送。并不是技术本身不行（例如在一些人看来似乎已经完全过时了的技术 HTML/CSS/JavaScript），其实还是人不行，再好的技术给你也做不出好东西来。 相对来说我更加看好这方面，而不是私有的解决方案如 XAML 或者 Flash 。这些技术的组合现在既然已经有了一个新的名字 AJAX，以后我们就把这些技术叫做 AJAX 好了。

.................

---这是dlee达人在2004在JAVAEYE的贴子片断，其当时的意义到今天可以说已经被证明可行的了---特此为文本借作导言。

下文作者是Brian Moeskau，翻译:Frank 原文出处在这里

教程：Ext简介
无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。本文将简单地简单介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和初级了解HTML Dom。否则的话，请从阅读初学JavaScript资源开始。

下载Ext
或许你未曾下载过，那应从这里下载最新版本的Ext http://extjs.com/downloads。

针对你的下载需求，有几个不同的弹性选项。通常地，最稳定的版本，是较多人的选择。下载解包后，那个example文件夹便是一个探险的好地方！

开始！
我们将使用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);  // 使元素半透明