http://www.cnblogs.com/mogen_yin/archive/2009/04/30/1447236.html

ExtJS是一個Ajax框架，是一個用javascript寫的，用于在客戶端創建豐富多彩的web應用程序界面。ExtJS可以用來開發RIA也即富客戶端的AJAX應用 ExtJS是一個用javascript寫的，主要用于創建前端用戶界面，是一個與后臺技術無關的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各種開發語言開發的應用中。 　　ExtJs最開始基于YUI技術，由開發人員Jack Slocum開發，通過參考Java Swing等機制來組織可視化組件，無論從UI界面上CSS樣式的應用，到數據解析上的異常處理，都可算是一款不可多得的JavaScript客戶端技術的精品。

朋友問我,Ext怎么學習,我記得自己學的時候純純因為它的簡單和視覺效果特別好,因為喜歡了才有努力的堅持不懈的激情.有朋友說能否寫點簡單的示例方便入門,我是覺得自己寫的都是很淺陋東西,實在不知道怎么簡單了,昨天晚上想了許久,覺得自己還是無比的粗淺,但依然有人說看不懂,我想可能是言語沒有說清楚,或者你在等到天上掉餡餅吧.因為,我覺得開始學習就是不斷的模仿,只要知道它的大致概念,在自己的項目中不斷的接觸,一天一天就會成長起來,建議最好根據自己的學習進度寫個小網站,將所學的知識融會貫通一下,就像我寫了好幾個Ext的網站,雖然暫時都沒有發布出去,但自己經常看看也是對自己的工作的激勵吧.接下來一段日子,盡量寫一些Ext2.2所有的對象的最簡單的用法.如果能夠堅持,以后會寫一個對應的提高系列.

下面就開始Ext之旅吧

?Ext是什么?

答曰:Ext是一個用jscript(javascript)所寫的一個ajax框架(我想大家都知道什么是ajax了吧,假想你已經知道,那我就不說了).而javascript也是更知道它的概念了,就更不用說了吧,好,那就也不說了.什么是Ext呢,結合javascript和ajax,我想你閉眼猜都能夠猜出它的功能了吧.那就用自己的語言說下什么是Ext吧,呵呵,思考真的很重要的.學習的重要環節就是要不斷的自己總結,總結就來自自己的思考.

Ext有多好呢?

答曰:仁者見仁,官方應用示例?自己好好看看吧,它的絢麗多姿是無法用語言描述的,你可能會很驚嘆,但我還要告訴你,這個官方應用示例并沒有把Ext的所有的功能都羅列出來,僅僅是一部分,有更多的有太多的等你去發現,星哥說了:太陽已經落山了,時間不等人滴.

Ext難嗎?

答曰:太多的人問這個問題,就像我開始學習java一樣,我問了好多好多人,都說難,讓我學習的信心到最后都剩的沒有一點兒了,于是學了當時身邊誰也不懂的vs.net.呵呵.如果有人問我這個問題,我告訴你,真的很簡單,不是說我會了才這么說,其實,我想說的是:大家玩游戲基本上都是無師自通的吧,現在明白了吧,如果你有玩游戲的那份精神和斗志,靠,天下事難難難者亦易易易也.

?在哪里下載Ext呢?

答曰:好,你能夠這么問,看來我做說客還是可以的(信心指數又增加了),因為我是從2.0版本,2.1版本,到現在的2.2版本,我真的說不出來他們到底有何具體的差別,但明顯的看見它明顯壯大了,不僅僅是體積,更是它的力量.?下載地址 官方的版本,有各個版本的,我建議學習最新的吧.

Ext有核心嗎?

答曰:看來只有我才能夠問這個問題呀,當年比干無心而死,看來框架也是一樣的,沒有核心怎么可以呢.我想在javascript中大家也都知道什么是類了吧,簡單的說就是一個函數就是一個類,類里面還可以有很多的類,可以無限嵌套.而Ext就是有很多的類庫組成,也就是有很多的函數組成,只是現在天上飛的水里游的都成了對象了,所以很多技術也都用對象的語言來描述.Ext就是主要有哪些類庫組成呢?有人說肯定有API層,是的,有的,有些人總是喜歡稱底層是API(API是什么意思,全稱Application Programming Interface 應用編程接口),喜歡就喜歡吧,我管不著.但Ext說了,要改變這樣的稱呼,于是Ext稱之為Core,為什么呢?因為Ext的底層在Core這個文件夾里面.core是什么意思呢?core[kC:]n.果核, 中心, 核心,我覺得稱底層為Core確實不錯,而且大寫的CORE還有一個意思:CORE=Congress of Racial Equality 爭取種族平等大會.感覺Ext的作者Jack Slocum是具有很濃烈的浪漫主義情懷的追求完美的一個程序員.?說到Core了:core對Ext的DoM操作,事件處理以及所有的直接在頁面上可以展示的和不可以展示的組件等提供了基礎的功能.剛剛提到可顯示的控件也叫組件,我們在程序中可以直接通過這些控件來實現非常友好,并且交互性也很好的應用.特別一提的是在那些不可見的組件中,有一個utils類,該類提供了很多的很實用的功能,可以方便實現對接收和發送的數據進行各種操作,實在是Ext框架不可或缺的一部分.

如何介紹Ext的組件呢?

答曰:這個問題我確實想了很長時間,因為像很多軟件的幫助教程一樣,它們總是把該軟件的所有功能都羅列出來,然后再逐個詳解,甚至很多功能可能你都從來都不需要,但你并不知道自己是否需要,就像最近在學習flash,總感到自己有茫然不知所措的感覺,學習的態度都會轉變.但,也不能夠說人家的幫助教程不好呀,畢竟是追求完整性和可用性方面,每個人的見解并不一樣. 好吧,我下定決心了.先簡單把組件說下,然后對這些組件再詳細解說加示例,而且每個示例都追求可用和簡單,將來再寫一個深入的就能夠達到完整性,倒不是說一定要追求完整,而是,如果你僅僅寫了入門,卻沒有提高的版本,感覺自己并沒有把事情做好做完整,畢竟人人都希望有始有終呀.畢竟自己還想早點介紹點關于Flex的故事呢,唉,總是沒有時間.

?Ext的組件有哪些呢?

?答曰:Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. 下面就是這些可以使用了控件的列表了,我直接從它的幫助文檔復制過來,并同時加上了它的英文原文,因為每次看到這段我總是能夠想起什么,呵呵:

Ext組件主要包括一些常用組件,如表單組件,數據組件,導航組件,相信大家看名稱就知道什么意思了.

xtype??????????? Class

基本組件---------------------------------------

box????????????? Ext.BoxComponent

button?????????? Ext.Button

colorpalette???? Ext.ColorPalette

component??????? Ext.Component

container??????? Ext.Container

cycle??????????? Ext.CycleButton

dataview???????? Ext.DataView

datepicker?????? Ext.DatePicker

editor?????????? Ext.Editor

editorgrid?????? Ext.grid.EditorGridPanel

grid???????????? Ext.grid.GridPanel

paging?????????? Ext.PagingToolbar

panel??????????? Ext.Panel

progress???????? Ext.ProgressBar

propertygrid???? Ext.grid.PropertyGrid

slider?????????? Ext.Slider

splitbutton????? Ext.SplitButton

statusbar??????? Ext.StatusBar

tabpanel???????? Ext.TabPanel

treepanel??????? Ext.tree.TreePanel

viewport???????? Ext.Viewport

window?????????? Ext.Window

導航組件---------------------------------------

toolbar????????? ?Ext.Toolbar

tbbutton???????? Ext.Toolbar.Button

tbfill????????????? ?Ext.Toolbar.Fill

tbitem??????????? Ext.Toolbar.Item

tbseparator????? Ext.Toolbar.Separator

tbspacer???????? Ext.Toolbar.Spacer

tbsplit????????? Ext.Toolbar.SplitButton

tbtext?????????? Ext.Toolbar.TextItem

窗體組件---------------------------------------

form???????????? Ext.FormPanel

checkbox???????? Ext.form.Checkbox

combo??????????? Ext.form.ComboBox

datefield??????? Ext.form.DateField

field??????????? Ext.form.Field

fieldset???????? Ext.form.FieldSet

hidden?????????? Ext.form.Hidden

htmleditor?????? Ext.form.HtmlEditor

label??????????? Ext.form.Label

numberfield????? Ext.form.NumberField

radio??????????? Ext.form.Radio

textarea???????? Ext.form.TextArea

textfield??????? Ext.form.TextField

timefield??????? Ext.form.TimeField

trigger????????? Ext.form.TriggerField

?Ext的每個組件都是有一個指定的Xtype屬性值,通過該值就可以得到該組件的類型,同時也可以根據該組件來定義一個組件 例如:

{xtype:"button",id:"btnEnter",text:"確定"} //這就是定義了一個按鈕的組件.

{xtype:"field",id:"txtName"} //這就是定義了一個輸入框的組件.

{xtype:"field",id:"txtPwd",inputType:"password"} //這就是定義了一個密碼框的組件.

當然你可以不用xtype 比如:

var btnEnter = new Ext.Button({id:"btnEnter",text:"確定"} );//這就是定義了一個按鈕的組件.

var txtName = new Ext.form.Textfield({id:"txtName"} );//這就是定義了一個輸入框的組件.

var txtPwd?? = new Ext.form.Textfield({id:"txtPwd",inputType:"password"}? );//這就是定義了一個密碼框的組件.

?是不是很簡單,在下面會解說具體的示例,包括它的基本的語法結構,同時,你需要明確,這和你在javascript里面的用法不會有不同的地方,只是有些方法Ext已經給我們封裝好了,我們只要有拿來主義的精神就可以.特別一說的是:Ext的一些很實用的類都是全局的,無須new了,直接用就可以.

在下節會介紹一些Ext的很好的很實用的也很簡單就能夠使用的Util類.

轉載于:https://www.cnblogs.com/mingyongcheng/archive/2011/03/28/1998105.html

總結

以上是生活随笔為你收集整理的【原】基础篇:第一篇,本节主要向大家介绍Ext的最基础的话题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。