Ext，在最開始的時候，是作為YUI的一個擴展存在的，所以那個時候它的名稱是YUI.Ext，后來，Ext作為一個獨立的項目進行開發，并 不再依賴于YUI，在使用Ext的過程當中，你可以使用Ext-base, Prototype+script.aculo.us，jQuey和YUI四種中的一種，我因為比較習慣使用prototype，所以會選擇 Prototype+script.aculo.us的組合。jQuery也是一個寫得很優美的框架，沒有用過，以后抽空看看代碼，應該獲益匪淺。 從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" /> 必須引入
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/xtheme-aero.css" /> 可選，用來控制主題，并且有其他兩個可選值，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構建完成會被執行的函數 呵呵，第一個例子就出來了，試試看吧~
|