结合Domino打造全功能的Grid

1.       需求说明:

在domino开发中我们经常会遇到表单上需要一个类似table的组件,你可以增删改等。比如我有一个张报核单据,上面需要详细列出每项金额的明细,我们先看完成后的效果:

 结合Domino打造全功能的Grid_第1张图片

上面的图就是我用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,并且需要设置隐藏条件。 

还有建立需要的多值域.

你可能感兴趣的:(结合Domino打造全功能的Grid)