学习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);  // 使元素半透明

时间: 2007-03-08

学习YUI.Ext 第六天--关于树TreePanel(Part 1)

学习YUI.Ext 第五天--关于树TreePanel(Part 1)  效果演示:http://www.ajaxjs.com/yuicn/demos/order_tree.asp     树组件是YUI.Ext 0.40 新增的组件.虽然YUI已经自带有TREE VIEW的组件,但JACK还是决定重新开发.具体原因在http://www.ajaxjs.com/yuicn/article.asp?id=20070245(翻译文章)或http://www.jackslocum.com/blog/2

学习YUI.Ext 第四天--对话框Dialog的使用

使用方法: 1.加入YUI.Ext 库到你的web程序: <!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI lib file --> <script type="text/javascript" src="deepcms/yui/utilities_2.1.0.js"></script><script ty

学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例

之前在Part 1简单介绍了Veiw和JSONView.今天这里小弟为大家说说应用的案例,原本Jack的Image Chooser是一个非常好的案例,当中包含Jack大量的奇技淫巧,不过正因为这样,过于深奥,小弟我亦不能全盘吃透,只挑其"勃大茎深"之处,与君共勉之!本文包含四大知识点:1.在LayoutDialog中加入Tabs:2.View的使用方式:3.JSONView的使用方式;4.获取XML/JSON的fields值与分页 演示地址 [View之定义]  A View is g

学习YUI.Ext 第七天--关于View&amp;JSONView

展现一条一条的二维关系的数据,我们可以使用GIRD组件. 但有些场合,如产品展示,画册,我们可以使用View组件,来展示"矩阵"式的数据. View的数据源来自DataModel对象,即包含XMLDataModel和JSONDataModel.尽管View支持JSON,但如果不是用于DataModel,View的子类JSONView更适用,因为它提供更多的事件和方法.一般来说,View用于XML数据源:JSONView用于JSON数据源. View如何工作? 记得以前如何输出一个记录吗

学习YUI.Ext 第三天

对于以前很多混淆不清的知识,有必要再梳理一下:就从最基础的变量开始说起. 1..变量variable a.全局变量Global Variable 和 局部变量 Private Variable 加var和不加var是有区别的        -->如果不用关键字var,声明一个变量,那么这个是全局变量,任何子函数都可以访问,就算是跳出花括号的地方,亦可被访问:       -->如果使用关键字var,则从所在的"花括号{}"起,全体函数都可以访问该变量,如: function

学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)

下面将介绍如何异步取一棵树的所有节点,具体做法与官方同步取节点有很大不同,尤其在json的id属性上,下面是我一些摸索,可能不是最佳方案,有待大家一起研究. 异步取节点的思路是这样的: 1.先定义一个初始化节点(也可以不定义,看个人需求) 2.yui-ext根据该节点id请求服务器,获得子节点各属性 3.循环 特点:可以在上一级目录中,在服务器端预先将该节点是否有子节点读好(json中的isLeaf属性),虽然但数据库将多承担一些压力,但用个count(*)不会造成太大负担(除非查询条件异常复杂

学习YUI.Ext第五日--做拖放Darg&amp;Drop

拖放某个元素Darg&Drop是windows(视窗)问世时的一个重要特征.现在我们要在浏览器里面实现,怎么做呢?先看看基本例子: 复制代码 代码如下: YAHOO.example.DDApp = function() {      var dd;      return {          init2: function() { //   var dropzone =["dz"];  //   for(i in dropzone){  //           new YA

学习YUI.Ext 第二天

遇到一些JS的语法上的问题,没有理解透,恶补基本功! 匿名函数 An anonymous function 没有名字的就叫作"匿名函数",像这个 function(x,y){return x+y} 没有名字当然不能直接调用,也无法调用:最多能只能把它赋值或闭包处理(闭包是什么下面再讲),如: var sum =function(x,y){return x+y}; alert(sum(1,2)); 这时候,与传统写法是等价的 function sum(x,y){return x+y}.这

2019最新系统学习路线零基础如何转行大数据

都知道大数据薪资高,前景好.而大数据又需要Java基础.对于稍微懂些Java的童鞋来说,到底如何转行大数据呢?今天小编给你一个大数据工程师具体的学习路线图.[ps:无java基础也可以学习大数据] 分享转行经验路线 对于Java程序员,大数据的主流平台hadoop是基于Java开发的,所以Java程序员往大数据开发方向转行从语言环境上更为顺畅,另外很多基于大数据的应用框架也是Java的,所以在很多大数据项目里掌握Java语言是有一定优势的. 当然,hadoop核心价值在于提供了分布式文件系统和分