EXT做為與使用者互動的前端，其功能可以概括為：生成使用者界面，與使用者實作互動，并與程式（PHP,.NET等）背景通信來完成與使用者的互動。下面就這幾個功能的實作原理做介紹。
1.1
生成使用者界面
EXT别廣泛接受認可的原因之一便是他擁有良好的使用者外觀。
一個系統中最主要的功能便是實作CRUD（新增，讀取，更新，删除），同時還有查詢。為了将這些功能集中在一起，特意封裝了一個EXT的CRUD面闆，将這些常用的功能封裝成一個類，以便建立易用性良好的界面。該CRUD類的程式代碼見前面的文章。
CRUD面闆是從EXT的panel繼承來的
Ext.namespace("Mis.Ext");
//繼承EXT的Panel，建立CRUD面闆
Mis.Ext.CrudPanel=Ext.extend(Ext.Panel,{……})；
//限于篇幅就不列出全部代碼
EXT裡的繼承用的是Ext.extend(元件名,{實作代碼})；
要使用這個CRUD面闆，需要繼承實作它，我們舉一個例子
//繼承CrudPanel，建立污水廠管理面闆
AddPlantPanel=Ext.extend(Mis.Ext.CrudPanel,{
id:"AddPlantPanel",//id号是表示一個面闆的唯一标志
title:"污水廠管理",//面闆的名稱，見上圖
baseUrl:"Plant.aspx",//資料源位址
//根據實際需要，重載編輯方法
edit:function()
{
CommentPanel.superclass.edit.call(this);//調用基類方法
var record=this.grid.getSelectionModel().getSelected();
if(record){
var id=record.get("plantID");
this.fp.form.setValues({ID:id});
}
},
//儲存
save:function()
{
var id=this.fp.form.findField("ID").getValue();
this.fp.form.submit({
waitMsg:'正在儲存。。。',
url:this.baseUrl+"?cmd="+(id?"Update":"Save"),
method:'POST',
success:function(form_instance_create, action) {
Ext.MessageBox.alert('友情提示', action.result.info);
},
failure:function(form_instance_create1, action1){
Ext.MessageBox.alert('友情提示', action1.result.info);
},
scope:this
});
},
//删除
removeData:function(){
this.remove('plantID');
} ,
//建立建立和修改的表單
createForm:function(){
var formPanel=new Ext.form.FormPanel({
frame:true,
labelWidth:60,
labelAlign:'right',
items:[{
xtype:'fieldset',
title:'基本資訊',
autoHeight:true,
defaults:{xtype:"textfield",width:300},
items:[
{xtype:"hidden",name:"ID"},
{fieldLabel:'編号',name:'plantID'},
{fieldLabel:'名稱',name:'plantName'}]
}]
});
return formPanel;
},
//建立放置表單的視窗，見上圖新增和修改的效果
createWin:function()
{
return this.initWin(438,180,"污水廠管理");
//建立新增、添加面闆
},
//指定JSON資料的mapping
storeMapping:["plantID","plantName"],
//初始化界面
initComponent : function(){
var sm = new Ext.grid.CheckboxSelectionModel();
this.cm=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),//獲得行号
sm,
//定義GRID的表頭資訊
{header: "污水廠編号", sortable:true,width: 100, dataIndex:"plantID"},
{header: "污水廠名稱", sortable:true,width: 200, dataIndex:"plantName"}
]);
AddPlantPanel.superclass.initComponent.call(this);
}
});
這樣就完成了一個能應用到實際中的CRUD面闆，效果見下圖
1.2
與使用者實作互動和與程式背景實作通信
EXT的元件在執行時是從initComponent開始的
我們來看看AddPlantPanel這個具體的CRUD面闆的執行過程
initComponent : function(){
var sm = new Ext.grid.CheckboxSelectionModel();
this.cm=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),//獲得行号
sm,
//定義GRID的表頭資訊
{header: "污水廠編号", sortable:true,width: 100, dataIndex:"plantID"},
{header: "污水廠名稱", sortable:true,width: 200, dataIndex:"plantName"}
]);
AddPlantPanel.superclass.initComponent.call(this);
}
首先是定義Grid表格的相關資訊,接着是調用基類的initComponent方法，注意，EXT裡面調用基類的方法是用superclass.方法名.call(this);
接着看基類方法裡的initComponent
initComponent : function(){
//首先是定義資料源
this.store=new Ext.data.JsonStore({
id:"Id",
url: this.baseUrl+'?cmd=List',//預設的資料源位址，繼承時需要提供
root: "rows",
totalProperty:"totalCount",
remoteSort:true,
fields:this.storeMapping});
this.cm.defaultSortable=true;//開啟排序
this.sm= new Ext.grid.CheckboxSelectionModel(); //選擇框
Mis.Ext.CrudPanel.superclass.initComponent.call(this);//初始化panel
var viewConfig=Ext.apply({forceFit:true},this.gridViewConfig); //添加配置資訊
//Grid表格
this.grid=new Ext.grid.GridPanel({
store: this.store,
cm: this.cm,
sm:this.sm,
trackMouseOver:false,
loadMask: true,
viewConfig:viewConfig,
tbar: [……],//頂部工具欄
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: this.store,
displayInfo: true,
displayMsg: '顯示第 {0} - {1} 條記錄，共 {2}條記錄',
emptyMsg: "沒有記錄"
})//底部工具欄，放置分頁資訊
});
//輕按兩下時執行修改
this.grid.on("celldblclick",this.edit,this);
this.add(this.grid); //将Grid表格添加到panel内，很重要
this.store.load({params:{start:0,limit:10}});//Grid表格生成後，接着是加載資料，這裡是與伺服器端通信的關鍵
上面代碼與伺服器通訊的關鍵在于url: this.baseUrl+'?cmd=List',和this.store.load({params:{start:0,limit:10}});
url:指定了資料源的位址，在頁面初始化時EXT調用this.store.load方法從this.baseUrl+'?cmd=List擷取資料，參數為start=0&limit=10，即從 Plant.aspx?cmd=List& start=0&limit=10擷取資料
當請求到達伺服器端Plant.aspx?cmd=List& start=0&limit=10時（畢業設計用的.NET，其實背景都很簡單），下面的代碼執行
if(Request.Params["cmd"].ToString()=="List")
{
int start =Convert.ToInt32(Request.Params["start"].ToString());
int
limit = Convert.ToInt32(Request.Params["limit"].ToString());
string json = pnt.GetJsonAll(start, limit, "");
Response.Write(json);
}
//ps這是c#，php的以前發過，自己去找
上面的代碼生成了一段JSON資料
{'totalCount':'5', 'rows':[{"plantID":"8","plantName":"ss"},{"plantID":"7","plantName":"7号污 水處理廠修改banben"},{"plantID":"23","plantName":"222"},{"plantID":"22", "plantName":"22"},{"plantID":"15","plantName":"15号污水處理廠"}]}
EXT讀取上面的JSON，兵将資料顯示在表格中，這是與伺服器的第一次通信
效果如下
show.JPG (19.7 KB)
2008-5-21 22:58
主要流程
1111.JPG (42.77 KB)
2008-5-21 22:58
頁面呈現給使用者後接着就是與使用者執行互動。
在Mis.Ext.CrudPane基類的初始化函數initComponent中有下面這段代碼
tbar: [{
id:'addButton',
text: '新增',
iconCls:'addIconCss',
tooltip:'添加新紀錄',
handler: this.create,
scope:this
},'-',//'-'給工具欄按鈕之間添加'|'
{
id:'editButton',
text:'編輯',
iconCls:'editIconCss',
tooltip:'修改記錄',
handler: this.edit,
scope:this
},'-',
{
text:'删除',
iconCls:'deleteIconCss',
tooltip:'删除所選中的資訊',
handler: this.removeData,
scope:this
},'-',
{
text:'重新整理',
iconCls:'refreshIcon',
tooltip:'重新整理紀錄',
handler: this.refresh,
scope:this
},'->',//'->'代表讓工具欄按鈕到右邊去
'Search: ',this.name,
{
text: '查詢',
pressed: true,
iconCls:'selectIconCss',
handler: this.search,
scope:this
},'
'
],
上面定義了面闆頂部工具欄的按鈕（效果見上圖中的按鈕），每個按鈕都有一個handler，其參數是該類裡的一個成員方法。當點選一個按鈕時，便觸發這個按鈕handler對應的方法，比如點選新增，那麼便會觸發this.create方法，下面我們跟蹤其執行路徑。
見下面……
附件
- 2008-5-21 22:58
生成使用者界面
- 2008-5-21 22:58
生成使用者界面
- 2008-5-21 22:58
生成使用者界面
接上面……從word拷過來的，無用字元比較多
首先是執行create方法，create方法如下
//建立（新增/修改）視窗
create:function()
{
this.showWin();//顯示（新增/修改）視窗
this.reset();//清空表單裡的資料
}
Create方法中有兩個函數，依次執行
//顯示（新增/修改）視窗
showWin:function()
{
//createForm()需要在繼承時提供，該方法作用是建立表單
if(!this.win){
if(!this.fp){
this.fp=this.createForm();
}
this.win=this.createWin();
this.win.on("close",function(){this.win=null;this.fp=null;this.store.reload();},this);//添加事件，當視窗關閉時表格資料重新加載
}
//視窗關閉時，資料重新加載
this.win.show();
},
Showwin調用createWin()方法建立一個視窗，并将表單放在裡面。而create裡的第二個方法則是将表單的内容重置。這樣就顯示出了一個新增的畫面
下面我們來看createWin()方法
//建立放置表單的視窗，見上圖新增和修改的效果
createWin:function()
{
return this.initWin(438,180,"污水廠管理");
//建立新增、添加面闆
},
該方法調用了initWin方法來建立視窗，為了更清晰的了解，我們再看看initWin方法
initWin:function(width,height,title)
{
var win=new Ext.Window({
width:width,
height:height,
buttonAlign:"center",
title:title,
modal:true,
shadow:true,
closeAction:"hide",
items:[this.fp],
buttons:[{text:"儲存",
handler:this.save,
scope:this},
{text:"清空",
handler:this.reset,
scope:this},
{text:"關閉",
handler:this.closeWin,
scope:this}
]
});
return win;
},
注意
{text:"儲存",
handler:this.save,
scope:this},
當使用者填完資料點選儲存時，觸發save方法，于是EXT調用save方法
//儲存
save:function()
{
var id=this.fp.form.findField("ID").getValue();
this.fp.form.submit({
waitMsg:'正在儲存。。。',
url:this.baseUrl+"?cmd="+(id?"Update":"Save"),
method:'POST',
success:function(form_instance_create, action) {
Ext.MessageBox.alert('友情提示', action.result.info);
},
failure:function(form_instance_create1, action1){
Ext.MessageBox.alert('友情提示', action1.result.info);
},
scope:this
});
},
效果
該方法實作了與ASP.NET背景通訊，将會把表單内的資料用POST方法傳到baseUrl?cmd=Save中，因為上面的baseUrl是Plant.aspx，是以最終将資料傳送到Plant.aspx?cmd=Save
[size=+0] EXT将資料傳到了.NET背景，接着就是.NET背景處理EXT傳來的資料，下面我們看看Plant.aspx怎麼處理
Mis.BLL.Plant pnt = new Mis.BLL.Plant();
if (Request.Params["cmd"].ToString() == "Save")
{
string id = Request.Params["plantID"].ToString();
string name = Request.Params["plantName"].ToString();
Mis.Model.Plant pntm = new Mis.Model.Plant();
pntm.plantID = id;
pntm.plantName = name;
try
{
pnt.Add(pntm);
Response.Write("{success:true,info:'新增成功'}");
}
catch (Exception adde)
{
Response.Write("{failure:true,info:'新增失敗,錯誤原因為:" + this.addlashes((adde.Message.ToString())) + "'}");
}
}
上面的方法實作了将資訊儲存到資料庫，如果成功則傳回"{success:true,info:'新增成功'}"，這是一個JSON字元串。EXT擷取傳回的資料，成功就調用save中的：
success:function(form_instance_create, action) {
Ext.MessageBox.alert('友情提示', action.result.info);
},
效果
仔細看原文，
try
{
pnt.Add(pntm);
Response.Write("{success:true,info:'新增成功'}");
}
catch (Exception adde)
{
Response.Write("{failure:true,info:'新增失敗,錯誤原因為:" + this.addlashes((adde.Message.ToString())) + "'}");
}
這段代碼其實已經給出來了， "{success:true,info:'新增成功'}“表示執行成功
{'totalCount':'9','rows':[{"plantID":"7","plantName":"7号污水處理廠修改banben"},{"plantID":"23","plantName":"222"},{"plantID":"22","plantName":"22"},{"plantID":"2","plantName":"污水廠 2"},{"plantID":"16","plantName":"name3"},{"plantID":"15","plantName":"name3"},{"plantID":"10","plantName":"10"},{"plantID":"1","plantName":"name1"},{"plantID":"","plantName":"ss"}]}
轉載于:https://www.cnblogs.com/winner/archive/2008/07/17/1245548.html