[导入]ext 学习笔记

网站： JavaEye 作者： yuping322 发表时间: 2007-08-23 09:06 此文章来自于 http://www.JavaEye.com
声明：本文系JavaEye网站原创文章，未经JavaEye网站或者作者本人书面许可，任何其他网站严禁擅自发表本文，否则必将追究法律责任！
原文链接： http://yuping.javaeye.com/blog/115874

Ext，在最开始的时候，是作为YUI的一个扩展存在的，所以那个时候它的名称是YUI.Ext，后来，Ext作为一个独立的项目进行开发，并不再依赖于YUI，在使用Ext的过程当中，你可以使用Ext-base, Prototype+script.aculo.us，jQuey和YUI四种中的一种，我因为比较习惯使用prototype，所以会选择 Prototype+script.aculo.us的组合。jQuery也是一个写得很优美的框架，没有用过，以后抽空看看代码，应该获益匪浅。

Ext官方网站： http://www.extjs.com

JSEclipse： http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_jseclipse

Firebug： http://www.getfirebug.com

从Ext的站点上下载最新版本的文件，解压什么的我就不说，我想说一下这个文档的结构：

├─adapter           存放所有adapter的文件夹
├─build               经过压缩（build）过的文件
├─docs               文档
├─examples         DEMO
├─package          按包分类的文件
├─resources        资源文件，包括CSS和一些图片
└─source            源代码

使用过程当中，除非你特别介意JS文件的加载是否影响速度，大可只引入ext-all.js和ext-all.css两个文件，Ext在包管理方面，我觉得应该向Dojo学习下。

JS和CSS引入的顺序：

引入JS：按照底层依赖的不同：

Ext Stand-alone：
ext-base.js
ext-all.js (or your choice of files)

Yahoo! UI (.12+)：
yui-utilities.js
ext-yui-adapter.js
ext-all.js (or your choice of files)

jQuery (1.1+)：
jquery.js
jquery-plugins.js // required jQuery plugins
ext-jquery-adapter.js
ext-all.js (or your choice of files)

Prototype (1.5+) / Scriptaculous (1.7+)：
prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files)

把相应的文件引入到HTML的head里后，你就可以写你自己的第一Ext的Demo了。

function InitDialog() {
var dialog = new Ext.BasicDialog(" hello-dlg", {
id: "hello-dialog",

            title: "Hello",
          autoTabs:true,
          width:500,
          height:300,
          shadow:true,
          minWidth:300,
          minHeight:250,
          proxyDrag: true
  });
  dialog.addKeyListener(27, dialog.hide, dialog);
  dialog.addButton('Submit', dialog.hide, dialog).disable();
  dialog.addButton('Close', dialog.hide, dialog);

   Ext.ComponentMgr.register(dialog);

}

function OnButtonClick() {
var dialog = Ext.getCmp("hello-dialog");
dialog.show();
}

Ext.onReady(InitDialog);

</script>

<div id=" hello-dlg"></div> 渲染DIV用到的层

这里有四处要注意一下：

id: "hello-dialog", Compoent的ID，有了这个ID才能用ComponentMgr.register来在全局进行注册
Ext.ComponentMgr.register(dialog); 注册组件

var dialog = Ext.getCmp("hello-dialog"); 根据ID来得到组件
Ext.onReady(InitDialog); Ext.onRead是注册一个在整个页面的DOM构建完成会被执行的函数

呵呵，第一个例子就出来了，试试看吧~

《 ext 学习笔记》的评论也很精彩，欢迎您也添加评论。查看详细 >>

JavaEye推荐
上海乐福狗信息技术有限公司:诚聘技术经理和开发工程师
免费下载IBM社区版软件--它基于开放的标准，支持广泛的开发类型，让您的开发高效自主！
京沪穗蓉四地免费注册，SOA技术高手汇聚交锋.
上海：优秀公司德比：高薪诚聘资深Java工程师
广州：优易公司：诚聘Java工程师，开发经理
上海：尤恩斯国际集团：诚聘开发工程师
北京：优秀公司NHNChina招聘:WEB开发,系统管理,JAVA开发, DBA

文章来源: http://yuping.javaeye.com/blog/115874

[导入]ext 学习笔记

你可能感兴趣的:([导入]ext 学习笔记)