1. 需求說明：
在domino開發中我們經常會遇到表單上需要一個類似table的組件，你可以增刪改等。比如我有一個張報核單據，上面需要詳細列出每項金額的明細，我們先看完成後的效果：
上面的圖就是我用extjs完成的。
2. 功能介紹
這個grid組件可以完成增加，刪除，插入，修改，排序等功能。每項功能的操作都只是針對grid，不需要額外的FormPanel。雙擊單元格就可以修改。
3. 如何使用
這個組件我做的儘可能通用，由於是專門爲domino平臺定製，grid中的數據均存儲在notes的多值域中。使用這個gird組件，你需要提供以下幾個數組：
（1）：多值域名的數組(第一列對應的序號多值域的名字必須爲Seq)
（2）：gird title顯示文字的數組
（3）：每個列對應的編輯單元格時需要的Ext對應組件的名稱，如果你這個組件爲ComboBox，那麼你需要在提供一個數組，在數組的對應位置存儲你要在ComboBox中顯示的內容。
4.注意問題：
1.Ext中DateField實際你取出值存到多值域的時候是一個UTC的時間。如果你在新的系統中使用該組件，這個沒有問題。由於我的系統原來的多值域存儲的時間爲“2009-08-08”類似形式，這樣在顯示的時候就無法識別了。
2.組件的校驗實際上就是Ext各個form組件的校驗，這個要根據不同系統的業務來處理。
3.權限控制，在domino中的系統中工作流居多，不同的流程條件下需要有權限控制，這個有兩種方案，
方案一：根據不同條件對grid的列是否設置Editor屬性，並控制按鈕的屬性。
方案二：由於grid是呈現在表單上的div元素，可以控制該div的隱藏條件，然後根據是否能取得到div dom來判斷去實例不同的grid。
由於在domino中js和表單的交互不是很方便，我選擇方案二。
4. 7.關於編號的維護只維護新增，插入時，刪除時不維護。
5.程序介紹
5.1.三個公用的函數如下：
1. 將多值域轉換爲數組返回
2. 多數組進行增，刪，插入
3. 根據不同的類型去實例化不同的Ext組件
function CoToArray(name)
{
var arrName=new Array();
if(Ext.getDom(name).value!="")
{
arrName=Ext.getDom(name).value.split(";");
}
return arrName;
}
//0:add,1:delete,2:insert
function OpMultiFieldArray(arrName,type,index,value)
{
for(i=0;i<arrName.length;i++)
{
var arrOpArray=CoToArray(arrName[i])
switch (type)
{
case 0:
if(0==i)
arrOpArray.push(value-1);
else
arrOpArray.push("");
break;
case 1:
arrOpArray.splice(index,1);
break;
case 2:
if(0==i)
arrOpArray.splice(index,0,value);
else
arrOpArray.splice(index,0,"");
break;
}
Ext.getDom(arrName[i]).value=arrOpArray.join(";");
}
}
function EditorCM(type)
{
var editorCM;
switch (type)
{
case "Read":
editorCM=null;
break;
case "TextField":
editorCM=new Ext.form.TextField();
break;
case "DateField":
editorCM=new Ext.form.DateField(
{format: 'Y-m-d'});
break;
case "TimeField":
editorCM=new Ext.form.TimeField();
break;
case "ComboBox":
editorCM=new Ext.form.ComboBox();
break;
case "NumberField":
editorCM=new Ext.form.NumberField();
break;
}
return editorCM;
}
5.2.下面是Ext.onReady部分：
Ext.onReady(function(){
//需要用戶指定的程序部分
var arrName=new Array("Seq","Loc","ODate","OTime","ExType","Cur","Fees","RMBFees","FFees","Memo");
var arrTitleName=new Array("序號","發生地點","發生日期","發生時間","費用別","幣別","原幣金額","審覈金額","人民幣金額","摘要說明");
var arrTypeName=new Array("Read","TextField","DateField","TimeField","ComboBox","ComboBox","NumberField","NumberField","NumberField","TextField");
var cmbStore=['交通費','膳雜費','其他'];
var cmbMoStore=['RMB','USD','TWD'];
var arrCmbStore=new Array();
arrCmbStore[4]=cmbStore;
arrCmbStore[5]=cmbMoStore;
//-----construct the read colunm of grid
var arrColMRead=new Array();
for(var k=0;k<arrName.length;k++)
{
arrColMRead[k]={header:arrTitleName[k], dataIndex: arrName[k], sortable: true};
}
var colMRead=new Ext.grid.ColumnModel(arrColMRead);
//-----end construct the read colunm of grid
//----- construct the edit colunm of grid
var sm = new Ext.grid.CheckboxSelectionModel();
var arrColM=new Array();
for(var k=0;k<=arrName.length;k++)
{
if(k==0)
{
arrColM[k]=sm;
}
else
{
if(arrTypeName[k-1]=="ComboBox")
{
arrColM[k]={header:arrTitleName[k-1], dataIndex: arrName[k-1], sortable: true,editor:new Ext.form.ComboBox(
{store:arrCmbStore[k-1],
displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
y:30})};
}
else if(arrTypeName[k-1]=="DateField")
{
arrColM[k]={header:arrTitleName[k-1], dataIndex: arrName[k-1], sortable: true,renderer:Ext.util.Format.dateRenderer('Y-m-d'),editor:EditorCM(arrTypeName[k-1])};
}
else
{
arrColM[k]={header:arrTitleName[k-1], dataIndex: arrName[k-1], sortable: true,editor:EditorCM(arrTypeName[k-1])};
}
}
}
var colM=new Ext.grid.ColumnModel(arrColM);
//-----end construct the edit colunm of grid
// create the Data Store
var strData= new Array();
if(CoToArray(arrName[0])!="")
{
for (i=0;i<CoToArray(arrName[0]).length ;i++ )
{
strData[i]=new Array();
for(var j=0;j<arrName.length;j++)
{
strData[i][j]=CoToArray(arrName[j])[i]
}
}
}
var store1=new Ext.data.SimpleStore(
{data:strData,
autoLoad:true,
fields:arrName
});
// create the read grid
if(Ext.getDom("grid")!=null)
{
var grid = new Ext.grid.GridPanel({
store: store1,
renderTo:"grid",
cm:colMRead,
width:1220,
header:true,
height:200
});
}
//---begin grid1
if(Ext.getDom("grid1")!=null)
{
var grid1 = new Ext.grid.EditorGridPanel({
renderTo:"grid1",
title:"可編輯的增刪改組件",
height:300,
width:1230,
sm:sm,
cm:colM,
store:store1,
//autoExpandColumn:10,
listeners: {
//修改部分會更新域
afteredit: function(e) {
var arrObj= CoToArray(e.field);
arrObj[e.row]=e.value;
Ext.getDom(e.field).value=arrObj.join(";");
} ,
beforeedit:function(e){
},
validateedit:function(e){
}
}
});
}
//---end grid1
//-------add1 button click
if(Ext.getDom('Add1')!=null)
{
var button = Ext.get('Add1');
var win;
button.on('click', function(){
var re=new Ext.data.Record(
{
Seq:grid1.getStore().getCount()+1
});
var store2=grid1.getStore();
store2.add(re);
store2.commitChanges();
//------begin add at last
OpMultiFieldArray(arrName,0,0,(grid1.getStore().getCount()+1));
});
}
//------end add1 button click
//----------delete1 button click
if(Ext.getDom('Delete1')!=null)
{
var delbutton=Ext.get('Delete1');
delbutton.on('click',function(){
var _rd = grid1.getSelectionModel().getSelected() ;
var delindex=grid1.getStore().indexOf(_rd);
if(grid1.getSelectionModel().getCount()==1)
{
grid1.getStore().remove(_rd);
grid1.getStore().commitChanges();
}
else
{
alert('每次只能刪除一條!');
}
OpMultiFieldArray(arrName,1,delindex);
});
}
//-----------end delete1 buttom click
//-----------begin insert1 buttom click
if(Ext.getDom('Insert1')!=null)
{
var insbutton=Ext.get('Insert1');
insbutton.on('click',function(){
var _rd = grid1.getSelectionModel().getSelected() ;
var insindex=grid1.getStore().indexOf(_rd);
var re=new Ext.data.Record(
{
Seq:insindex+1
});
var store2=grid1.getStore();
if(grid1.getSelectionModel().getSelected()!=null)
{
store2.insert(insindex,re);
store2.commitChanges();
}
else
{
alert('請選擇要插入的位置！');
}
//------begin insert at index
OpMultiFieldArray(arrName,2,insindex,insindex);
var arrSeq=CoToArray(arrName[0]);
for(i=0;i<arrSeq.length;i++)
{
arrSeq[i]=i+1;
}
Ext.getDom(arrName[0]).value=arrSeq.join(";");
//------end insert at index
});
}
//-----------end iinsert1 buttom click
});
5.3.子表單中需要加入的html代碼部分：
<div id="grid"></div>
<input type="button" id="Add1" value="增加"/>
<input type="button" id="Delete1" value="刪除"/>
<input type="button" id="Insert1" value="插入"/>
<div id="grid1"></div>
注意這些都爲內嵌html，並且需要設置隱藏條件。
還有建立需要的多值域.