在做page grid時也很郁悶，開始以為隻用引用Ext js的page grid對象翻頁等都會自動搞定，沒想到，翻頁操作還是要通過伺服器端代碼生成，Ext js隻是負責傳送start，limit等參數等。。。艾，高估它了。
在notes中應用page grid，我主要用了以下設計元素，表單，視圖，代理和LS lib庫
1、表單，用于顯示page grid
< div id ="dlg-box" style ="visibility:hidden;position:absolute;top:0px;" >
< div class ="x-dlg-hd" > Select Expired Server </ div >
< div class ="x-dlg-bd" >
< div id ="page-grid" style ="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;" ></ div >
</ div >
</ div >
js檔案如下，其中有對Ext Dialog box 的處理，因為我的Page Grid在Dialogbox中顯示。
function displayDialog() ... {
var thisform = document.forms[0];
var key = thisform.mLineItemKey.value;
//Move selected records
function doMove(isOK)...{
if(isOK=="yes")
...{
var m = grid.getSelections();
//Set the value of key
m[0].set('key',key);
var jsonData = '[' + Ext.util.JSON.encode(m[0].data);
for(i=1;i<m.length;i++)
...{
//Set the value of key
m[i].set('key',key);
jsonData = jsonData + ',' + Ext.util.JSON.encode(m[i].data);
}
jsonData = jsonData + ']' ;
var con = new Ext.data.Connection();
con.request(...{
url: dbpath+'wxExpiredServer?openAgent&action=updatefield&rdm'+getRandom(),
params: ...{data:jsonData},
callback: function (opts, success, response)...{
if(success) ...{
var returnValue = getXmlNodeValue(response.responseXML,"response");
if(returnValue.toLowerCase()!="success")
alert(returnValue);
else...{
alert('Records Move Successfully!');
ds.reload();
gds.reload();
}
}
}
})
}
else
...{
grid.getSelectionModel().clearSelections();
}
}
function onMoveClick()...{
var m = grid.getSelections();
if(m.length > 0)
...{
Ext.MessageBox.confirm('Message', 'Are sure to move?' , doMove);
}
else
...{
Ext.MessageBox.alert('Message', 'Please select your records!');
}
}
//Show Dialog
function showDialog()...{
//Create Dialog
var dialog = new Ext.BasicDialog("dlg-box", ...{
autoTabs:true,
width: 690,
height: 375,
shadow: true,
minWidth: 300,
minHeight: 250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
dialog.show();
}
//Create Record
var Row = Ext.data.Record.create([
...{name: 'key'},
...{name: 'unid'},
...{name: 'product'},
...{name: 'cpu'},
...{name: 'memory'},
...{name: 'harddisk'},
...{name: 'serialnum'},
...{name: 'acqdate'}
]);
// create the Data Store
var ds = new Ext.data.Store(...{
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy(...{url: dbpath+"wxExpiredServer?openAgent&action=displaypage&view=xmlExpiredServer&rdm="+getRandom()}),
// create reader that reads the records
reader: new Ext.data.XmlReader(...{
record: 'row',
id: 'unid',
totalRecords: 'totalCount'
}, Row)
});
// the column model has information about grid columns
// the data store
var cm = new Ext.grid.ColumnModel([...{
header: "KEY",
dataIndex: 'key',
width: 50,
hidden: true
},...{
header: "UNID",
dataIndex: 'unid',
width: 50,
hidden: true
},...{
header: "Product",
dataIndex: 'product',
width: 250
},...{
header: "CPU",
dataIndex: 'cpu',
width: 100
},...{
header: "Memory",
dataIndex: 'memory',
width: 100
},...{
header: "Hard Disk",
dataIndex: 'harddisk',
width: 150
},...{
header: "Serial No.",
dataIndex: 'serialnum',
width: 150
},...{
header: "Acquisition Date",
dataIndex: 'acqdate',
width: 100
}]);
// by default columns are sortable
cm.defaultSortable = true;
// create the page grid
var grid = new Ext.grid.Grid('page-grid', ...{
ds: ds,
cm: cm,
loadMask: true
});
// render it
grid.render();
var gridFoot = grid.getView().getFooterPanel(true);
// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, ...{
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records"
});
// add the view button
paging.addButton(...{
text: 'Move',
handler:onMoveClick
});
// trigger the data store load
ds.load(...{params:...{start: 0, limit: 25}});
showDialog();
} ;
2、視圖用于生成xml檔案
" < row > "
+ " < key > " + @Text(mLineItemKey) + " </ key > "
+ " < unid > " + @Text(@DocumentUniqueID) + " </ unid > "
+ " < product > " + @Text(mProductName)+ " </ product > "
+ " < cpu > " + @Text(mCPU)+ " </ cpu > "
+ " < memory > " + @Text(mMemory) + " </ memory > "
+ " < harddisk > " + @Text(mHardDisk) + " </ harddisk > "
+ " < serialnum > " + @Text(mSerialNum) + " </ serialnum > "
+ " < acqdate > " + @Text(mAcqDate) + " </ acqdate > "
+ " </ row > " + @NewLine
3、代理用于處理操作
Sub Initialize() Sub Initialize
On Error Goto errHandle
Dim CurLocation As String
CurLocation = "Agent.wxServerProduct"
Dim session As New NotesSession
Dim note As NotesDocument
Dim db As NotesDatabase
Set note = session.DocumentContext
Set db = note.ParentDatabase
Dim ajaxRequest As AjaxRequest
Set ajaxRequest = New AjaxRequest(note)
Dim action As String
action = ajaxRequest.getAction()
Dim jsonString As String
Dim json As JSON
Dim jObjs As Variant
Dim json2Note As String
Dim view As NotesView
Dim category As String
If Lcase(action) = "displaypage" Then
Set view = db.GetView(ajaxRequest.getView)
If Not view Is Nothing Then
Call ajaxRequest.getXmlPageView(view, ajaxRequest.getCategory, Cint(ajaxRequest.getStart()),_
Cint(ajaxRequest.getLimit()))
End If
End If
If Lcase(action) = "updatefield" Then
Set json = New JSON()
jsonString = ajaxRequest.getDecodedJsonString()
jObjs = json.Parse(jsonString)
json2Note = ajaxRequest.updateFieldJsonToNote(note.ParentDatabase,"mLineItemKey","key",jObjs)
If Len(json2Note) > 0 Then
Call bbstkLogError(CurLocation, 0, 0, json2Note)
ajaxRequest.xmlResponse("Failure:"+json2Note)
Exit Sub
Else
ajaxRequest.xmlResponse("Success")
End If
End If
Exit Sub
errHandle:
Call bbstkLogError(CurLocation, Err, Erl, Error)
ajaxRequest.xmlResponse("Failure:"+Error)
End Sub
4、LS lib庫有一個專門處理AjaxRequest的類。