结合Domino打造全功能的Grid

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，并且需要设置隐藏条件。

还有建立需要的多值域.