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