学习YUI.Ext基础第一天


Posted in Javascript onMarch 10, 2007

导言

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

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);  // 使元素半透明 
Javascript 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
JavaScript触发器详解
Mar 10 #Javascript
又一个图片自动缩小的JS代码
Mar 10 #Javascript
基础的prototype.js常用函数及其用法
Mar 10 #Javascript
优秀js开源框架-jQuery使用手册(1)
Mar 10 #Javascript
用JavaScript实现仿Windows关机效果
Mar 10 #Javascript
Javascript中的Split使用方法与技巧
Mar 09 #Javascript
用JavaScript事件串连执行多个处理过程的方法
Mar 09 #Javascript
You might like
JavaScript创建命名空间的5种写法
2014/06/24 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
Python3中使用PyMongo的方法详解
2017/07/28 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
房地产开发计划书
2014/01/10 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
抢劫罪辩护词
2015/05/21 职场文书
门卫管理制度范本
2015/08/05 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers