ExtJS Merging with values

ExtJS report the same value merge method

To make a report as effective:

Core function: Add in when you use it.

//consolidation of columns with the same name as the city function Gridspan (grid, Roworcol,colname, BorderStyle) {varArray1 =NewArray ();varCount1 =0; varCount2 =0; varIndex1 =0; varIndex2 =0; varArow =undefined;varPrevalue =undefined;varFirstsamecell =0; varAllrecs =Grid.getstore (). GetRange ();if(Roworcol = ="Row") {Count1=Grid.getcolumnmodel (). getColumnCount (); Count2=Grid.getstore (). GetCount (); } Else{count1=Grid.getstore (). GetCount (); Count2=Grid.getcolumnmodel (). getColumnCount (); } count1=2;//merging the second column  for(i =1; i < count1; i++) {Prevalue=undefined; Firstsamecell=0; Array1[i]=NewArray (); for(j =0; J < Count2; J + +) { if(Roworcol = ="Row") {index1=J; Index2=i; } Else{index1=i; Index2=J; } if(Allrecs[index1].Get(colname) = =prevalue) {Allrecs[index1].Set(ColName,"&nbsp;"); Array1[i].push (j); //Alert (i + "\ r \ n" +j); if(j = = Count2-1) { varindex = Firstsamecell + Math.Round ((j +1-Firstsamecell)/2-1); if(Roworcol = ="Row") {Allrecs[index].Set(colname, Prevalue); } Else{allrecs[index1].Set(Grid.getcolumnmodel (). Getcolumnid (index), prevalue); }                }            } Else { if(J! =0) { varindex = Firstsamecell + Math.Round ((j +1-Firstsamecell)/2-1); if(Roworcol = ="Row") {Allrecs[index].Set(colname, Prevalue); } Else{allrecs[index1].Set(Grid.getcolumnmodel (). Getcolumnid (index), prevalue); }} Firstsamecell=J; Prevalue= Allrecs[index1].Get(colname); ALLRECS[INDEX1].Set(ColName,"&nbsp;"); if(j = = Count2-1) {Allrecs[index1].Set(colname, Prevalue); }}}} Grid.getstore (). CommitChanges ();//Add all divider lines  for(i =0; I < Grid.getstore (). GetCount (); i++) {  for(j =0; J < Grid.getcolumnmodel (). getColumnCount (); J + +) {Arow=Grid.getview (). Getcell (I, j); ARow.style.borderTop=BorderStyle; ARow.style.borderLeft=BorderStyle; }    }//remove dividing lines from merged cells  for(i =1; i < array1.length; i++) {  for(j =0; J < Array1[i].length; J + +) { if(Roworcol = ="Row") {Arow=Grid.getview (). Getcell (Array1[i][j], i); ARow.style.borderTop='None'; } Else{Arow=Grid.getview (). Getcell (i, array1[i][j]); ARow.style.borderLeft="None"; }        }    }}

When the store is in load:

Errorinfostore.on ('load'var mygrid = ext.getcmp ('mygrid  'gridspan'row','areacode'  '1px solid #9BCEDB');            

The third parameter of the Gridspan method AreaCode represents the column header.

Add the following CSS to the JSP page:

/* align with table header */ . x-grid3-row td,.x-grid3-summary-row td {    padding-right:0px;    Padding-left:0px;    Padding-top:0px;    Padding-* * Remove Blank Space * / . x-grid3-row {    border -right-width:0px;    Border-left-width:0px;    Border-top-width:0px;    Border-bottom-width:0px;}

ExtJS Merging with values