|
|
另：這篇教程是建立在Ext2.2上的。這個(gè)很多教程都沒說明。讓人很糊涂。我在此特別說明
網(wǎng)上很多教程，但是實(shí)際使用并不是很多，我想作為一個(gè)星期一個(gè)星期的總結(jié)來給各位網(wǎng)絡(luò)上的朋友帶來幫助。希望各位有用。我會(huì)從每個(gè)細(xì)節(jié)都說明，盡量不漏掉作為初學(xué)者需要知道的基礎(chǔ)知識(shí)。第一次寫教程，見笑了。
因?yàn)槲覍W(xué)這個(gè)是這樣一個(gè)過程，通過一個(gè)控件了解其他的控件，剩下的就是屬性查API了。API我自己在翻譯CHM版的。因?yàn)槭莻€(gè)人操作。所以時(shí)間有限。。大家見諒。
在Ext下。首先接觸的一定是Grid。我也是如此。我是因?yàn)?Grid與Ext結(jié)緣。
下面先說一下Ext類的申明形式。
以Grid為例
Js代碼
復(fù)制代碼 代碼如下:
var grid=new Ext.form.GridPanel({
這里是屬性。
});
var grid=new Ext.form.GridPanel({
這里是屬性。
});
這個(gè)申明和Java的面向?qū)ο蠛芟嗨啤Ｒ詎ew關(guān)鍵詞作為建立GridPanel類的實(shí)例，關(guān)于面向?qū)ο蟮幕A(chǔ)知識(shí)就不在這里展開了。只是在寫這個(gè)總結(jié)的時(shí)候常用到面向?qū)ο蟮母拍睢€(gè)人覺得學(xué)程序，不管你學(xué)不學(xué)Java。think in Java必須看完，如果你想學(xué)好最好看英文版。因?yàn)橐痪湓捘憧梢苑磸?fù)的揣摩。加深印象。我才看到一半都覺得他對(duì)一個(gè)人的程序思維起很大的作用。好了不走題了。
知道OOP的都知道，在類的里面有一個(gè)構(gòu)造器，在實(shí)現(xiàn)類的實(shí)例的時(shí)候?qū)?huì)初始化這個(gè)構(gòu)造器內(nèi)的屬性值或者調(diào)用方法。
但是在Ext中的屬性賦值不是“=”而是":"。
上面說的是理論的，實(shí)際上過程就是這樣。
var grid = new Ext.form.GridPanel();實(shí)例化一個(gè)類的對(duì)象。
{}里面包含的就是傳遞給這個(gè)類的初始化屬性值。因?yàn)楹诵拇a我還沒研究，也沒到那份上，所以具體如何傳遞和實(shí)現(xiàn)就不說明了，在以后的Ext學(xué)習(xí)經(jīng)驗(yàn)里會(huì)說明的。
那將上面的例子擴(kuò)展一下。
Java代碼
復(fù)制代碼 代碼如下:
var grid=new Ext.form.GridPanel({
id: 'list-account-panel',
ds: dataStore,
cm: userCM,
sm: selectBoxModel,
tbar: menubar,
bbar: pagingbar,
loadMask: {msg: 數(shù)據(jù)加載中...'},
layout: 'fit',
autoScroll:true
});
var grid=new Ext.form.GridPanel({
id: 'list-account-panel',
ds: dataStore,
cm: userCM,
sm: selectBoxModel,
tbar: menubar,
bbar: pagingbar,
loadMask: {msg: 數(shù)據(jù)加載中...'},
layout: 'fit',
autoScroll:true
});
這些是常用的屬性，將從這里向其他的部分?jǐn)U展出去。
這樣就申明了一個(gè)實(shí)力對(duì)象并且將其初始化。
你明白了這個(gè)過程，如果是真的理解了，只要你熟悉了API .了解到組件的屬性和其定義的方法，你可以去創(chuàng)建任何你想要的組件了。如GridPanel.Panel,Tree.其實(shí)道理是胡同的。好了，將好這個(gè)關(guān)鍵的基礎(chǔ)部分，后面的就是屬性了，有興趣的可以繼續(xù)看。
有些教程里面這里會(huì)用到Ext2.2的一個(gè)屬性el，這個(gè)屬性是將控件綁定到指定的頁面元素中，但是就因?yàn)檫@個(gè)el，而將大家的思維固定在了只能綁定在頁面元素中了。事實(shí)上，有時(shí)候要將grid加入tabPanel中的。這個(gè)時(shí)候就不需要el。有時(shí)候創(chuàng)建自己的GridPanel新類并繼承GridPanel類。在創(chuàng)建過程中使用ext.applyif方法,講新類里沒有而原有類里有的屬性復(fù)制過來。這樣在調(diào)用新類的時(shí)候，新類的傳遞可以傳遞el這樣單獨(dú)的屬性值。我已經(jīng)建立好一個(gè)類的封裝。下面會(huì)說到我說的這個(gè)擴(kuò)展類的封裝。先把grid的基本知識(shí)說完。
看看上面說的例子吧，id，是這個(gè)Ext組建的唯一id號(hào)，在整個(gè)項(xiàng)目里面id號(hào)要盡可能唯一，這方便自己識(shí)別也不容易出其他問題。比如說tabPanel組件的html調(diào)用的時(shí)候就會(huì)出現(xiàn)id問題。
ds，這是設(shè)置數(shù)據(jù)源。
例子具體代碼如下：
Java代碼
復(fù)制代碼 代碼如下:
dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
])
});
this.dataStore.load({params:{start:0, limit:this.myPageSize}});
dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
])
});
this.dataStore.load({params:{start:0, limit:this.myPageSize}}); 這里要說明的東西很多。。
一個(gè)網(wǎng)站上面既然用到了Ext肯定不會(huì)是靜態(tài)的，因?yàn)槲易疃嗟氖怯?a href=/yuedu/fuwuqi/ target=_blank class=infotextkey>服務(wù)器交互而不是直接讀取XML文件。所以我這里使用了服務(wù)器讀取資料的例子。
proxy: new Ext.data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
})；
這個(gè)很簡單了啊。一看就明白。HttpProxy這是向本地的文件中傳遞數(shù)據(jù)請(qǐng)求。簡單點(diǎn)理解就是這樣。核心代碼沒研究，具體操作過程不名。但是作為類。只需要知道怎么用就成了。
但這里有個(gè)概念，用到了匿名函數(shù)。不能說匿名函數(shù)吧。。。怎么說呢。。。
proxy屬性是通過一種形式向文件發(fā)送請(qǐng)求。。屬性賦值可以是已經(jīng)創(chuàng)建好的實(shí)例名，也可以是個(gè)以new關(guān)鍵詞新建的匿名實(shí)例。這樣說不知道能否明白。
后面的屬性reader是設(shè)定這個(gè)數(shù)據(jù)源的數(shù)據(jù)讀取方式。這個(gè)例子是用的jsonReader.還可以用ArreyReader。這個(gè)看具體需求了。屬性值可以是對(duì)象也可以是匿名實(shí)例對(duì)象。好像也可以是方法。沒試過，只是個(gè)設(shè)想。
復(fù)制代碼 代碼如下:
new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
])
再來說這一部分。這是比較簡潔和標(biāo)準(zhǔn)的JsonReader方式了。
先說明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è)字。總結(jié)一下。
如果是自己構(gòu)建一個(gè)json數(shù)組給Ext的話。應(yīng)該是這樣的格式。
{test:'test'}
必須背這個(gè)大括號(hào)擴(kuò)起來。
前面test就向上面申明的name屬性，作為標(biāo)記符號(hào)，告訴JsonReader獲取這個(gè)數(shù)據(jù)后該如何截?cái)嗵幚怼?
我用的php寫的返回我上面例子的返回json數(shù)據(jù)。
Echo $callback.'({"total":"'.$article_NUM.'","results":'.json_encode($result_array).'})';
看見了嗎。我必須去構(gòu)建這個(gè)json數(shù)組的格式，并且標(biāo)記符號(hào)必須和jsonReader上的一樣。
也就是total和results所截取的值是在這個(gè)返回里規(guī)定好了的。如果格式不同，將讀不出數(shù)據(jù)來。
再回頭看root屬性，就是綁定results標(biāo)記符號(hào)后面的json數(shù)據(jù)格式值了。在jsonReader后面的屬性
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
就是來對(duì)json數(shù)組進(jìn)行截取處理的。
最后進(jìn)行加載。因?yàn)檫@只是個(gè)定義，并且進(jìn)行實(shí)例化。并沒對(duì)其進(jìn)行任何操作。
這個(gè)很好理解。就像你洗衣服，把衣服仍進(jìn)洗衣機(jī)了，但你不開開關(guān)，不接電源，衣服是不會(huì)干凈的。
由于創(chuàng)建了這個(gè)Stroy數(shù)據(jù)源，所以可以對(duì)其進(jìn)行調(diào)用他的方法了。Stroy下有一個(gè)方法是load。對(duì)其數(shù)據(jù)進(jìn)行加載。也就是開始洗衣了。呵呵~
接下來回到上面的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; 不想多說什么。。這里唯一要說明的：tooltip是開啟鼠標(biāo)提示。其他的和創(chuàng)建新實(shí)例沒什么區(qū)別。new->類名->構(gòu)造構(gòu)造器->屬性
defaultSortable是設(shè)置是否排序。我是設(shè)置的假，因?yàn)槲业腅xt沒本地化，排序那個(gè)按鈕按下來是個(gè)英文的。所以我設(shè)置了假。你也可以單獨(dú)為列設(shè)置。
tbar: menubar,
bbar: pagingbar,
這兩個(gè)屬性是用來設(shè)置頭部工具條和底部工具條的。工具條上可以有按鈕。
這是底部和頂部的工具按鈕。說明寫在程序代碼里。。我有寫描述的習(xí)慣。
Java代碼
var menubar = [{
<SPAN style="COLOR: #000000">text:'添加',
tooltip:'添加一個(gè)新文章',<SPAN>//按鈕提醒功能</SPAN>
iconCls:'addItem',//<SPAN>圖標(biāo)拉。看英文都懂了</SPAN>
handler: function(){//<SPAN>handler屬性后面是跟一個(gè)方法，是綁定你單擊這個(gè)按鈕后的事件處理</SPAN>
var createWin = new SamPeng.account.Create();//<SPAN>我是將文件打成類包的。所以這里直接創(chuàng)建實(shí)例。</SPAN>
createWin.show();//<SPAN>添加頁面顯示，這個(gè)方法就是省略了el綁定問題。</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: "沒有數(shù)據(jù)"
}); //<SPAN>這是底部按鈕，一個(gè)分頁的底部。呃。。不知道該怎么說明，這個(gè)我是寫好了直接copy的別人的。覺得這里沒什么必要變化。</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();//添加頁面顯示，這個(gè)方法就是省略了el綁定問題。
}
},'-',{
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: "沒有數(shù)據(jù)"
}); //這是底部按鈕，一個(gè)分頁的底部。呃。。不知道該怎么說明，這個(gè)我是寫好了直接copy的別人的。覺得這里沒什么必要變化。 ok。基礎(chǔ)部分講完了。。。接下來的文章我會(huì)講解將其封裝在類里面并且作為繼承GridPanel類的新類。
再次重復(fù)申明。在我這里你不可能得到完整的例子，不是我沒有，而是我覺得那是在害你。你更需要的是去查API。知道方法格式，查一下API。剩下的不就是完成你的程序思想了么。感謝大家觀看我的教程。謝謝。
很討厭速食化的教程，但我不知道入了俗套沒有。呵呵。希望對(duì)大家有所幫助。
轉(zhuǎn)載者。。。我知道有這樣的轉(zhuǎn)載者的。連內(nèi)容的實(shí)用性不看就轉(zhuǎn)了。
轉(zhuǎn)載者，請(qǐng)著名作者:SamPeng。謝謝。
我不想教各位新手什么高級(jí)技術(shù)，因?yàn)槲乙苍谘芯浚皇窍虢檀蠹乙粋€(gè)思考的方向，能夠具有舉一反三的能力，能夠真正學(xué)會(huì)Ext和開始深入了解。如果你想實(shí)現(xiàn)什么特效，這個(gè)文字不適合你，但如果你想和我一起學(xué)習(xí)Ext，我想鄙人的小文非常適合你。
JavaScript技術(shù)：Ext第一周 史上最強(qiáng)學(xué)習(xí)筆記---GridPanel（基礎(chǔ)篇），轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
