EXT JS認識EXTJS,第一個EXTJS例子
但是以上用的是.net ，我這裡使用Java。
EXT是基於Web的富客戶端框架，完全是基於標準W3C(全球資訊網聯盟WorldWideWeb Consortium)技術構建設的，使用到的都是最基本的HTML、CSS、DIV等相關技術。Ext最傑出之處，是開發了一系列非常簡單易用的控制元件及元件，我們只需要使用這些元件就能實現各種豐富多彩的UI的開發。
Ext的UI元件模型和開發理念脫胎、成型於Yahoo元件庫YUI和Java平臺上Swing兩者，併為開發者遮蔽了大量跨瀏覽器方面的處理。相對來說，EXT要比開發者直接針對DOM、W3C物件模型開發UI元件輕鬆。
EXT基礎:理解
用EXT寫的素有配置屬性、事件、等等，其最終都會轉化為HTML在瀏覽器上顯示出來，而每一個HTML頁面都有一個層次分明的DOM樹模型，瀏覽器中的所有內容都有相應的DOM物件，動態改變頁面的內容，正是通過使用指令碼語言來操作DOM物件實現。
然後Ext在DOM的基礎上，建立了ExtElement，可以使用Element來包裝任何DOM，Element物件中添加了一系列快捷、簡便的實用方法。可以讓我們能更準確的操作DOM樹.
就像asp裡控制元件,我們會覺得很方便,EXT也想到了,因此，除了Element以外，Ext還建立了一系列的客戶端介面元件Component，我們在
總結一下三者，元件Component是最高層次的抽象，是直接給使用者使用的，ExtElement是Ext的底層API，主要是由Ext或自定義元件呼叫的，而DOM是W3C標準定義的原始API，Ext的Element通過操作DOM 來實現頁面的效果顯示。
EXT元件體系
Ext在Component類基礎上，使用面向物件的方法，設計了一系列的元件及控制元件。因此，要能遊刃有餘地使用Ext，熟悉Ext元件體系是最基本的。
ExtJS 中的元件體系由框架進行了非常大的重構，其中最重要的就是形成了一個結構及層次分明的元件體系，由這些元件形成了Ext的控制元件，Ext 元件是由Component類定義，每一種元件都有xtype 屬性值，通過該值可以得到一個元件的型別或者是定義一個指定型別的元件。
元件大致可以分為三大類：基本元件、工具欄元件、表單及元素元件。元件功能很強大,一兩句程式碼就是一個很好的顯示效果.
舉個程式碼例子吧
var panel=Ext.create('Ext.panel.Panel',{
id:'myPanel',
title:'第一個Panel應用',
width:200,
height:300,
items:[
{xtype:'textfield',fieldLabel:'使用者名稱'},
{xtype:'textfield',fieldLabel:'密碼'}
],
tbar:[{xtype:'button',text:'按鈕'}],
tools:[{
type:'refresh',
handler: function(event,toolEl,panel){
}
}]
});這段程式碼首先定義了panel控制元件,然後在控制元件裡定義了兩個text和一個按鈕.items是panl的內容,tbar是工具條.其實整個程式碼就是一個配置的過程,配置的引數使用json資料的方式傳給後臺處理,後臺根據Xtype的型別創建出相應的元件.
其他控制元件就不多說,想了解的朋友可以下一份文件看看,很全很詳細.
在公司待了幾個星期,對EXT的使用有了初步的瞭解,參照同事和文件寫出想要的佈局和一些控制效果等程式碼都差不多可以實現了.js程式碼最不好辦的是除錯,因為現在公司用的IDE對js程式碼的編寫和除錯不敏感,而js程式碼又有很多的標點,IDE又不報錯，所以很難發現錯誤,還好現在可以使用firefox瀏覽器的firebug來實施斷點除錯,不然是真的抓不住蟲.所以也向寫js的朋友推薦firebug,確實不錯.
關於ExtJS的學習,下面這段話是從網上摘來的:
Ext看起來是非常簡單的東西，稍有點程式設計知識的人，按照開發文件中的入門指南，半小時就能學會使用Ext。然而，當準備使用Ext開發一個專案時，卻不知道從何處入手，或者是在使用Ext的時候，出了一點小問題自己不知道該如何解決。程式設計是一門實踐性的科學，僅僅靠看書、看別人寫的程式碼是遠遠不夠的，因此，必須多做實踐才行，只有通過不斷的練習，大量的使用，才能對Ext的元件特性、事件、事件處理機制以及與伺服器端互動介面等深入的掌握，只有多做運用，深入瞭解ext的元件的工作原理及機制，才能編寫出高階的Ext的應用。
覺得說的非常對,對新手來說,最忌自以為會了,其實自己開發還是不行,眼高手低是初學者的大忌,所以要想真正理解ext,用好ext,還得多看文件,多動手.
在專案中使用ExtJS
ExtJS為開發者在開發富客戶的B/S應用中提供豐富的UI元件，具有統一的主題，便於快速開發，提高效率。但顯然它並不適合網際網路站的開發。
主要目錄檔案介紹
builds：壓縮後的ExtJS程式碼，體積更小，更快；
docs：開發文件；
examples：官方演示示例；
locale：多國語言資原始檔；
pkgs：ExtJS各部分功能的打包檔案；
resource：ExtJS所需要的CSS與圖片檔案；
src：未壓縮的原始碼目錄；
bootstarp.js：ExtJS庫引導檔案,可自動切換ext-all.js與ext-all-debug.js；
ext-all.js：ExtJS核心庫；
ext-all-debug.js：ExtJS核心庫的除錯版,除錯時使用。
ext-all-debug-w-comments.js：帶註釋的ExtJS核心庫除錯版。
如何引入檔案
在專案中使用ExtJS，以下檔案必需的：1 整個resources資料夾
2 ext-all.js或ext-all-debug.js或ext-all-debug-w-comments.js檔案
3 ext-lang-zh_CN.js檔案
在頁面中用到ExtJS至少引入以下檔案：
1 resources\css\ext-all.css
2 ext-all.js（如果要對ExtJS程式碼進行除錯或學習可引入ext-all-debug.js或ext-all-debug-w-comments.js）
3 ext-lang-zh_CN.js
一個簡單示例
Html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link href="js/ext-all.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
//建立一個窗體
var win = new Ext.Window({
width: 300,
height:300,
items: [],
modal: true,
buttonAlign: 'center',
buttons: [{
text: '測試', id: 'btnTest', handler: function () {
Ext.Msg.show({
title: '詢問',
msg: '您喜歡 ExtJs 嗎？',
fn: processResult,
icon: Ext.Msg.QUESTION,
buttons: Ext.Msg.YESNO
});
}
}
]
});
win.show();
});
//詢問對話方塊處理Handler
function processResult(btn) {
Ext.Msg.alert('結果', btn);
}
</script>
<body>
hello html;
</body>
</html>
結果：
