ext 学习笔记

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引入的顺序： <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" target="_blank" rel="external nofollow" />         必须引入

<link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-aero.css" target="_blank" rel="external nofollow" /> 可选，用来控制主题，并且有其他两个可选值，xtheme-gray.css、xtheme-vista.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了。 <script type="text/javascript"> 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>   <button onClick="OnButtonClick();">Show</button> <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构建完成会被执行的函数

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