EXTJS學習系列基礎篇:第一篇(轉載)作者殷良勝

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

下面就開始Ext之旅吧

 Ext是什麼?

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

Ext有多好呢?

Ext難嗎?

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

 在哪裡下載下傳Ext呢?

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了,直接用就可以.

本文轉自溫景良部落格園部落格，原文連結：http://www.cnblogs.com/wenjl520/archive/2008/11/03/1325468.html，如需轉載請自行聯系原作者