如果你想實(shí)現(xiàn)什么特效，這個(gè)文字不適合你，但如果你想Ext文章，我想鄙人的小文非常適合你。
另：這篇教程是建立在Ext2.2上的。這個(gè)很多教程都沒(méi)說(shuō)明。讓人很糊涂。我在此特別說(shuō)明
網(wǎng)上很多教程，但是實(shí)際使用并不是很多，我想作為一個(gè)星期一個(gè)星期的總結(jié)來(lái)給各位網(wǎng)絡(luò)上的朋友帶來(lái)幫助。希望各位有用。我會(huì)從每個(gè)細(xì)節(jié)都說(shuō)明，盡量不漏掉作為初學(xué)者需要知道的基礎(chǔ)知識(shí)。第一次寫(xiě)教程，見(jiàn)笑了。
因?yàn)槲覍W(xué)這個(gè)是這樣一個(gè)過(guò)程，通過(guò)一個(gè)控件了解其他的控件，剩下的就是屬性查API了。API我自己在翻譯CHM版的。因?yàn)槭莻€(gè)人操作。所以時(shí)間有限。。大家見(jiàn)諒。
在Ext下。首先接觸的一定是Grid。我也是如此。我是因?yàn)?Grid與Ext結(jié)緣。
下面先說(shuō)一下Ext類的申明形式。
以Grid為例
Js代碼

這個(gè)申明和java的面向?qū)ο蠛芟嗨?。以new關(guān)鍵詞作為建立GridPanel類的實(shí)例，關(guān)于面向?qū)ο蟮幕A(chǔ)知識(shí)就不在這里展開(kāi)了。只是在寫(xiě)這個(gè)總結(jié)的時(shí)候常用到面向?qū)ο蟮母拍?。個(gè)人覺(jué)得學(xué)程序，不管你學(xué)不學(xué)java。think in java必須看完，如果你想學(xué)好最好看英文版。因?yàn)橐痪湓捘憧梢苑磸?fù)的揣摩。加深印象。我才看到一半都覺(jué)得他對(duì)一個(gè)人的程序思維起很大的作用。好了不走題了。
知道OOP的都知道，在類的里面有一個(gè)構(gòu)造器，在實(shí)現(xiàn)類的實(shí)例的時(shí)候?qū)?huì)初始化這個(gè)構(gòu)造器內(nèi)的屬性值或者調(diào)用方法。
但是在Ext中的屬性賦值不是“=”而是":"。
上面說(shuō)的是理論的，實(shí)際上過(guò)程就是這樣。
var grid = new Ext.form.GridPanel();實(shí)例化一個(gè)類的對(duì)象。
{}里面包含的就是傳遞給這個(gè)類的初始化屬性值。因?yàn)楹诵拇a我還沒(méi)研究，也沒(méi)到那份上，所以具體如何傳遞和實(shí)現(xiàn)就不說(shuō)明了，在以后的Ext學(xué)習(xí)經(jīng)驗(yàn)里會(huì)說(shuō)明的。
那將上面的例子擴(kuò)展一下。
Java代碼 

這些是常用的屬性，將從這里向其他的部分?jǐn)U展出去。
這樣就申明了一個(gè)實(shí)力對(duì)象并且將其初始化。
你明白了這個(gè)過(guò)程，如果是真的理解了，只要你熟悉了API .了解到組件的屬性和其定義的方法，你可以去創(chuàng)建任何你想要的組件了。如GridPanel.Panel,Tree.其實(shí)道理是胡同的。好了，將好這個(gè)關(guān)鍵的基礎(chǔ)部分，后面的就是屬性了，有興趣的可以繼續(xù)看。
有些教程里面這里會(huì)用到Ext2.2的一個(gè)屬性el，這個(gè)屬性是將控件綁定到指定的頁(yè)面元素中，但是就因?yàn)檫@個(gè)el，而將大家的思維固定在了只能綁定在頁(yè)面元素中了。事實(shí)上，有時(shí)候要將grid加入tabPanel中的。這個(gè)時(shí)候就不需要el。有時(shí)候創(chuàng)建自己的GridPanel新類并繼承GridPanel類。在創(chuàng)建過(guò)程中使用ext.applyif方法,講新類里沒(méi)有而原有類里有的屬性復(fù)制過(guò)來(lái)。這樣在調(diào)用新類的時(shí)候，新類的傳遞可以傳遞el這樣單獨(dú)的屬性值。我已經(jīng)建立好一個(gè)類的封裝。下面會(huì)說(shuō)到我說(shuō)的這個(gè)擴(kuò)展類的封裝。先把grid的基本知識(shí)說(shuō)完。
看看上面說(shuō)的例子吧，id，是這個(gè)Ext組建的唯一id號(hào)，在整個(gè)項(xiàng)目里面id號(hào)要盡可能唯一，這方便自己識(shí)別也不容易出其他問(wèn)題。比如說(shuō)tabPanel組件的html調(diào)用的時(shí)候就會(huì)出現(xiàn)id問(wèn)題。
ds，這是設(shè)置數(shù)據(jù)源。
例子具體代碼如下：
Java代碼 

這個(gè)很簡(jiǎn)單了啊。一看就明白。HttpProxy這是向本地的文件中傳遞數(shù)據(jù)請(qǐng)求。簡(jiǎn)單點(diǎn)理解就是這樣。核心代碼沒(méi)研究，具體操作過(guò)程不名。但是作為類。只需要知道怎么用就成了。
但這里有個(gè)概念，用到了匿名函數(shù)。不能說(shuō)匿名函數(shù)吧。。。怎么說(shuō)呢。。。
proxy屬性是通過(guò)一種形式向文件發(fā)送請(qǐng)求。。屬性賦值可以是已經(jīng)創(chuàng)建好的實(shí)例名，也可以是個(gè)以new關(guān)鍵詞新建的匿名實(shí)例。這樣說(shuō)不知道能否明白。
后面的屬性reader是設(shè)定這個(gè)數(shù)據(jù)源的數(shù)據(jù)讀取方式。這個(gè)例子是用的jsonReader.還可以用ArreyReader。這個(gè)看具體需求了。屬性值可以是對(duì)象也可以是匿名實(shí)例對(duì)象。好像也可以是方法。沒(méi)試過(guò)，只是個(gè)設(shè)想。

再來(lái)說(shuō)這一部分。這是比較簡(jiǎn)潔和標(biāo)準(zhǔn)的JsonReader方式了。
先說(shuō)明Json的數(shù)據(jù)格式，這個(gè)很重要，我在這個(gè)上面載了個(gè)大跟頭，只知道用json數(shù)據(jù)傳送，卻不知道是什么格式。
（{"total":"5","results":["id":"28","name":"SamPeng","typename":"這是種類","time":"2008.02.02"]}）
這是一條返回記錄。如果是多條。
（{"total":"5","results":["id":"28","name":"SamPeng","typename":"這是種類","time":"2008.02.02"，{第二條}，{第三條}，{第四條}]}）
能看明白嗎？呵呵，不明白那我也多打幾個(gè)字?？偨Y(jié)一下。
如果是自己構(gòu)建一個(gè)json數(shù)組給Ext的話。應(yīng)該是這樣的格式。
{test:'test'}
必須背這個(gè)大括號(hào)擴(kuò)起來(lái)。
前面test就向上面申明的name屬性，作為標(biāo)記符號(hào)，告訴JsonReader獲取這個(gè)數(shù)據(jù)后該如何截?cái)嗵幚怼?
我用的php寫(xiě)的返回我上面例子的返回json數(shù)據(jù)。
Echo $callback.'({"total":"'.$article_NUM.'","results":'.json_encode($result_array).'})';
看見(jiàn)了嗎。我必須去構(gòu)建這個(gè)json數(shù)組的格式，并且標(biāo)記符號(hào)必須和jsonReader上的一樣。
也就是total和results所截取的值是在這個(gè)返回里規(guī)定好了的。如果格式不同，將讀不出數(shù)據(jù)來(lái)。
再回頭看root屬性，就是綁定results標(biāo)記符號(hào)后面的json數(shù)據(jù)格式值了。在jsonReader后面的屬性
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
就是來(lái)對(duì)json數(shù)組進(jìn)行截取處理的。
最后進(jìn)行加載。因?yàn)檫@只是個(gè)定義，并且進(jìn)行實(shí)例化。并沒(méi)對(duì)其進(jìn)行任何操作。
這個(gè)很好理解。就像你洗衣服，把衣服仍進(jìn)洗衣機(jī)了，但你不開(kāi)開(kāi)關(guān)，不接電源，衣服是不會(huì)干凈的。
由于創(chuàng)建了這個(gè)Stroy數(shù)據(jù)源，所以可以對(duì)其進(jìn)行調(diào)用他的方法了。Stroy下有一個(gè)方法是load。對(duì)其數(shù)據(jù)進(jìn)行加載。也就是開(kāi)始洗衣了。呵呵~
接下來(lái)回到上面的GridPanel的屬性
cm: userCM
這是設(shè)定好表的列頭。什么。你不知道什么叫列頭。。你可以洗洗睡了。
Java代碼
var cm = new Ext.grid.ColumnModel([
selectBoxModel,
{header:'文章序號(hào)',dataIndex:'id', tooltip: '文章編號(hào)'},
{header:'文章標(biāo)題',dataIndex:'name',tooltip: '文章名稱'},
{header:'文章類型',dataIndex:'typename',tooltip: '文章類別'},
{header:'修改時(shí)間',dataIndex:'time',tooltip: '修改時(shí)間'}
]);
cm.defaultSortable = false;
        var cm = new Ext.grid.ColumnModel([
            selectBoxModel,
            {header:'文章序號(hào)',dataIndex:'id', tooltip: '文章編號(hào)'},
            {header:'文章標(biāo)題',dataIndex:'name',tooltip: '文章名稱'},
            {header:'文章類型',dataIndex:'typename',tooltip: '文章類別'},
            {header:'修改時(shí)間',dataIndex:'time',tooltip: '修改時(shí)間'}
        ]);
     cm.defaultSortable = false; 不想多說(shuō)什么。。這里唯一要說(shuō)明的：tooltip是開(kāi)啟鼠標(biāo)提示。其他的和創(chuàng)建新實(shí)例沒(méi)什么區(qū)別。new->類名->構(gòu)造構(gòu)造器->屬性
defaultSortable是設(shè)置是否排序。我是設(shè)置的假，因?yàn)槲业腅xt沒(méi)本地化，排序那個(gè)按鈕按下來(lái)是個(gè)英文的。所以我設(shè)置了假。你也可以單獨(dú)為列設(shè)置。
tbar: menubar,
bbar: pagingbar,
這兩個(gè)屬性是用來(lái)設(shè)置頭部工具條和底部工具條的。工具條上可以有按鈕。
這是底部和頂部的工具按鈕。說(shuō)明寫(xiě)在程序代碼里。。我有寫(xiě)描述的習(xí)慣。
Java代碼
var menubar = [{
<SPAN style="COLOR: #000000">text:'添加',
tooltip:'添加一個(gè)新文章',<SPAN>//按鈕提醒功能</SPAN>
iconCls:'addItem',//<SPAN>圖標(biāo)拉?？从⑽亩级?lt;/SPAN>
handler: function(){//<SPAN>handler屬性后面是跟一個(gè)方法，是綁定你單擊這個(gè)按鈕后的事件處理</SPAN>
var createWin = new SamPeng.account.Create();//<SPAN>我是將文件打成類包的。所以這里直接創(chuàng)建實(shí)例。</SPAN>
createWin.show();//<SPAN>添加頁(yè)面顯示，這個(gè)方法就是省略了el綁定問(wèn)題。</SPAN>
}
},'-',{
id: 'grid-edit-button',
text:'修改',
tooltip:'修改這條文章',
iconCls:'editItem',
disabled:true,
handler: function(){
var record = Ext.getCmp('list-account-panel').getSelectionModel().getSelected();
var editWin = new SamPeng.Grid.Edit({id: record.id});
editWin.show();//修改界面顯示
}
},'-',{
id: 'grid-delete-button',
text:'刪除',
tooltip:'刪除選定的文章',
iconCls:'remove',
disabled:true,
handler: function(){
new SamPeng.Grid.DeleteItem({panel: 'list-account-panel'});
}
}];
var pagingbar = new Ext.PagingToolbar({
pageSize: this.myPageSize,
store: this.dataStore,
displayInfo: true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
emptyMsg: "沒(méi)有數(shù)據(jù)"
}); //<SPAN>這是底部按鈕，一個(gè)分頁(yè)的底部。呃。。不知道該怎么說(shuō)明，這個(gè)我是寫(xiě)好了直接copy的別人的。覺(jué)得這里沒(méi)什么必要變化。</SPAN></SPAN>
        var menubar = [{
            text:'添加',
            tooltip:'添加一個(gè)新文章',//按鈕提醒功能
            iconCls:'addItem',//圖標(biāo)拉?？从⑽亩级?
            handler: function(){//handler屬性后面是跟一個(gè)方法，是綁定你單擊這個(gè)按鈕后的事件處理
                var createWin = new SamPeng.account.Create();//我是將文件打成類包的。所以這里直接創(chuàng)建實(shí)例。
                createWin.show();//添加頁(yè)面顯示，這個(gè)方法就是省略了el綁定問(wèn)題。
            }
        },'-',{
            id: 'grid-edit-button',
            text:'修改',
            tooltip:'修改這條文章',
            iconCls:'editItem',
            disabled:true,
            handler: function(){
                var record = Ext.getCmp('list-account-panel').getSelectionModel().getSelected();
                var editWin = new SamPeng.Grid.Edit({id: record.id});
                editWin.show();//修改界面顯示
            }
        },'-',{
            id: 'grid-delete-button',
            text:'刪除',
            tooltip:'刪除選定的文章',
            iconCls:'remove',
            disabled:true,
            handler: function(){
                new SamPeng.Grid.DeleteItem({panel: 'list-account-panel'});
            }
        }];
        var pagingbar = new Ext.PagingToolbar({
            pageSize: this.myPageSize,
            store: this.dataStore,
            displayInfo: true,
            displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
            emptyMsg: "沒(méi)有數(shù)據(jù)"
        }); //這是底部按鈕，一個(gè)分頁(yè)的底部。呃。。不知道該怎么說(shuō)明，這個(gè)我是寫(xiě)好了直接copy的別人的。覺(jué)得這里沒(méi)什么必要變化。 ok?；A(chǔ)部分講完了。。。接下來(lái)的文章我會(huì)講解將其封裝在類里面并且作為繼承GridPanel類的新類。
再次重復(fù)申明。在我這里你不可能得到完整的例子，不是我沒(méi)有，而是我覺(jué)得那是在害你。你更需要的是去查API。知道方法格式，查一下API。剩下的不就是完成你的程序思想了么。感謝大家觀看我的教程。謝謝。
很討厭速食化的教程，但我不知道入了俗套沒(méi)有。呵呵。希望對(duì)大家有所幫助。
轉(zhuǎn)載者。。。我知道有這樣的轉(zhuǎn)載者的。連內(nèi)容的實(shí)用性不看就轉(zhuǎn)了。
轉(zhuǎn)載者，請(qǐng)著名作者:SamPeng。謝謝。
我不想教各位新手什么高級(jí)技術(shù)，因?yàn)槲乙苍谘芯浚皇窍虢檀蠹乙粋€(gè)思考的方向，能夠具有舉一反三的能力，能夠真正學(xué)會(huì)Ext和開(kāi)始深入了解。如果你想實(shí)現(xiàn)什么特效，這個(gè)文字不適合你，但如果你想和我一起學(xué)習(xí)Ext，我想鄙人的小文非常適合你。

最新評(píng)論