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