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,
1220,
header:true,
height:200
});
}
//---begin grid1
if(Ext.getDom("grid1")!=null)
{
var grid1 = new Ext.grid.EditorGridPanel({
renderTo:"grid1",
title:"可编辑的增删改组件",
height:300,
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，并且需要设置隐藏条件。
还有建立需要的多值域.