簡介:這篇文章將告訴你如何使用Ext中的Grid,Form,Dialog來實(shí)現(xiàn)列表,創(chuàng)建,更新,刪除,查找和分頁功能
參考:http://extjs.com/learn/Tutorial:Using_Ext_grid_form_dialog_to_achieve_paging_list,_create,_edit,_delete_function
作者:puras
簽于現(xiàn)在網(wǎng)上多數(shù)的Form的例子都多數(shù)是描述前臺(tái)UI的,而沒有對(duì)與服務(wù)端通訊的部分,故參考EXTJS的一個(gè)指南,寫下此文,希望能對(duì)大家有所幫助.
在WEB應(yīng)用中,大部分的頁面都可以被分為:列表,創(chuàng)建,讀取,更新,刪除.在Ext的文檔中心提供了一個(gè)非常好的例子,一個(gè)行內(nèi)編輯的表格.然而,在現(xiàn)實(shí)中,行內(nèi)編輯的表格是遠(yuǎn)遠(yuǎn)不夠的,還需要用不同的方式來展示表單.下面的例子中向你展示如何在表格中創(chuàng)建/更新一個(gè)對(duì)話框表單.
列表功能
首先是是一個(gè)權(quán)限列表頁,它包含分頁,查詢/過濾功能,創(chuàng)建和刪除功能.
先定義數(shù)據(jù)源:
this.ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({ url : '/wit/data.shtml' }), //'/wit/data.shtml' 一個(gè)讀取數(shù)據(jù)列表的Action
reader : new Ext.data.JsonReader({ //使用JSON傳輸入數(shù)據(jù)
root : 'roleList',
totalProperty : 'totalCount',
id : 'id'
},
// 定義字段映射
[
{
name : 'id',
mapping : 'id',
type : 'string'
},
{
name : 'name',
mapping : 'name',
type : 'string'
},
{
name : 'description',
mapping : 'description',
type : 'string'
},
{
name : 'createDate',
mapping : 'createDate',
type : 'string'
},
{
name : 'updateDate',
mapping : 'updateDate',
type : 'string'
}
]),
remoteSort : true
});
this.ds.load({ params:{ start : 0, limit : 20 } });
指定數(shù)據(jù)的來源位置,解析的方式,以及字段的映射.
接下來是表格中表頭的定義,匹配上面的字段:
this.cm = new Ext.grid.ColumnModel([
{
header : '#',
dataIndex : 'id',
width : 30,
sortable : 1
},
{
header : '名稱',
dataIndex : 'name',
width : 140,
sortable : 1
},
{
header : '描述',
dataIndex : 'description',
width : 140,
sortable : 1
},
{
header : '創(chuàng)建日期',
dataIndex : 'createDate',
width : 150,
sortable : 1
},
{
header : '修改日期',
dataIndex : 'updateDate',
width : 150,
sortable : 1
}
]);
再定義一下Grid:
this.grid = new Ext.grid.Grid('htmlGridPanel', {
ds : Grid.ds,
cm : Grid.cm,
enableColLock : false,
autoSizeColumns : true,
loadMask : true
});
this.grid.render();
現(xiàn)在,就可以看到簡單的表格了.功能還有待完善.
接下來,在表格的頭部面板處,添加過濾/查詢的下拉菜單:
this.gridHead = this.grid.getView().getHeaderPanel(true);
this.toolbar = new Ext.Toolbar(this.gridHead);
this.filterBtn = new Ext.Toolbar.MenuButton({
icon : '../images/class.gif',
cls : 'x-btn-text-icon',
text : '選擇過濾器',
tooltip : '選擇一個(gè)過濾器',
menu : { items : [
new Ext.menu.CheckItem({ text : '編號(hào)', value : 'id', checked : true, group : 'filter', checkHandler : this.onItemCheck}),
new Ext.menu.CheckItem({ text : '名稱', value : 'name', checked : false, group : 'filter', checkHandler : this.onItemCheck}),
new Ext.menu.CheckItem({ text : '描述', value : 'description', checked : false, group : 'filter', checkHandler : this.onItemCheck})
]},
minWidth : 105
});
this.toolbar.add(this.filterBtn);
this.filter = Ext.get(this.toolbar.addDom({
tag : 'input',
type : 'text',
size : '30',
value : '',
style : 'background : #F0F0F9;'
}).el);
this.filter.on('keypress', function(e) {
if (e.getKey() == e.ENTER && this.getValue().length > 0) {
Grid.ds.load({ params : { start : 0, limit : 20 }});
}
});
在表格的底部面板添加分頁,添加,刪除按鈕:
this.gridFoot = this.grid.getView().getFooterPanel(true);
this.paging = new Ext.PagingToolbar(this.gridFoot, this.ds, {
pageSize : 20,
displayInfo : true,
displayMsg : '共有 {2} 條記錄.當(dāng)前顯示 {0} - {1}條記錄.',
emptyMsg : '沒有記錄!'
});
this.paging.add('-', {
pressed : true,
enableToggle : true,
text : '添加',
cls : '',
toggleHandler : this.doAdd
});
this.paging.add('-', {
pressed : true,
enableToggle : true,
text : '刪除',
cls : '',
toggleHandler : this.doDel
});
在分頁中,你需要在從服務(wù)器端加載數(shù)據(jù)之前發(fā)送過濾的字段和值:
this.ds.on('beforeload', function() {
Grid.ds.baseParams = {
filterValue : Grid.filter.getValue(),
filterTxt : Grid.filterBtn.getText()
};
});
從服務(wù)器端返回的列表的JSON結(jié)果如下:
{"roleList":[{"id":21,"description":"description21","name":"puras21","createDate":"Fri Sep 07 15:54:44 CST 2007","updateDate":"Fri Sep 07 15:54:44 CST 2007"},{"id":40,"description":"description40","name":"puras40","createDate":"Fri Sep 07 15:54:44 CST 2007","updateDate":"Fri Sep 07 15:54:44 CST 2007"}],"totalCount":2}
刪除
刪除方法如下:
doDel : function() {
var c = Grid.grid.getSelections();
if (c.length > 0)
Ext.MessageBox.confirm('消息', '確認(rèn)要?jiǎng)h除所選記錄?', Grid.doDelProc);
else
Ext.MessageBox.alert('警告', '最少需要選擇一條記錄!');
},
doDelProc : function(btn) {
if (btn == 'yes') {
if (Grid.grid.getSelectionModel().hasSelection()) {
var ids = new Array();
var records = Grid.grid.getSelectionModel().getSelections();
for (var i = 0, len = records.length; i < len; i++) {
ids[ids.length] = records[i].id;
}
Ext.lib.Ajax.request(
'GET',
'/wit/delete.shtml?ids=' + ids,
{
success : Grid.onSuccess,
failure : function(form, action) { Ext.MessageBox.alert('消息', '刪除失敗!');}
},
null
);
}
}
},
onSuccess : function(o) {
var response = function(json) {
try {
return eval('(' + json + ')');
} catch(e) {}
return null;
}(o.responseText);
if (response.failure && response.failure == true) {
Ext.MessageBox.alert('消息', response.info);
}
Grid.ds.reload();
}
通過Ajax的形式提交到服務(wù)器端.如果刪除失敗,則將失敗信息顯示給用戶.onSuccess可以用于添,刪,改三個(gè)功能的處理.返回的JSON數(shù)據(jù)結(jié)構(gòu)如下:
"{success : true, info : '刪除成功!'}"
未完待續(xù)......