Ext implement table column header freeze effect, lock column header

This period of time our project uses the Coolite to do the rich client, The current version of Coolite is 0.8.1, and the EXT version it uses is 2.2.1, therefore, the following is mainly explained in this version of the implementation of the lock column and multi-line table head, it is necessary to explain that ext in the 2.0 version after the locking column function, can only achieve their own, Chinese habits and foreign countries are not the same, like the table to the number of According to, and many forms, one of the most basic functions of a table is to lock the columns and multiline headers, which are not directly included in the components provided by Coolite and ext, although they are not provided by these two frameworks, but still say that the Ext JS function is very powerful, Coolite for ext in the ASP.net application encapsulates most of the functions, but also expands a part of the huge function module, very good, can and official open source package Java version GWT2.0 comparable.
Read some nonsense, talk about the theme, look at the effect of the picture:

The implementation of the lock column is now more common is to inherit the grid, and then rewrite the module to implement a double table, the following example is implemented by the Medavid of the lock column, the version of [Update 5],ext code is very long on the point of major and fixed, examples in the back of the complete provision. EXT provides a template for these controls to rewrite, or rewrite the main template.

Code
1 inittemplates:function () {
2 if (!this.templates) {
3 this.templates = {};
4}
5 if (!this.templates.master) {
6 this.templates.master = new Ext.template (
7 ' <div class= "X-grid3" hidefocus= "true" > ",
8 ' <div class= ' x-grid3-locked ' > ',
9 ' <div class= ' X-grid3-header "><div class=" X-grid3-header-inner "><div class=" X-grid 3-header-offset ">{lockedheader}</div></div><div class=" X-clear "></div></div>",
<div class= "X-grid3-scroller" ><div class= "X-grid3-body" &GT;{LOCKEDBODY}&LT;/DIV&GT;&L T;div class= "X-grid3-scroll-spacer" ></div></div>,
One ' </div> ',
"<div class=" X-grid3-viewport ">",
"<div class=" X-grid3-header "><div class=" X-grid3-header-inner "><div class=" X-gri D3-header-offset ">{header}</div></div><div class=" X-clear "></div></div>",
<div class= "X-grid3-scroller" ><div class= "X-grid3-body" >{body}</div><a HR ef= "#" class= "X-grid3-focus" tabindex= "-1" ></a></div> ",
' </div> ',
"<div class=" X-grid3-resize-marker "> </div>",
"<div class=" X-grid3-resize-proxy "> </div>",
' </div> '
19);
20}
Ext.grid.LockingGridView.superclass.initTemplates.call (this);
22},
23

At the same time, add the Gettotallockedwidth method for Columnmodel, the original [Update 5] in the script in the Ext.grid.LockingColumnModel to be removed.

Code
1 ext.grid.columnmodel.prototype.gettotallockedwidth=function () {
2          var totalWidth = 0;
3         for (var i = 0; i <  this.config.length; i++) {
4              if (this.islocked (i)  && !this.ishidden (i)) {
5                  totalWidth +=  This.getcolumnwidth (i);
6             }
7         }
8         return totalwidth;
9     };

In addition, the version for [Update 5] currently supports row selection mode with a bug, which is the line moving when the focus is obtained, because there is no relocation, and the following methods are added to the Ext.grid.LockingGridView to be corrected.

Code
1 Getresolvedxy:function (Resolved) {
2 if (!resolved) {
3 return null;
4}
5 var c = Resolved.cell, r = Resolved.row;
6 return c? Ext.fly (c). Getxy (): [This.scroller.getX (), Ext.fly (R). GetY ()];
7},
8

Multiple-row headers correspond to two files, respectively, one is for the table with locked columns, one for the table with no locked columns, two table output objects are not the same, to be judged to output a different value, as for the implementation of the way everyone look at the code to know.

Let's put it into the coolite. Create a new extgridpanel inherits from Gridpanel, and then rewrite OnPreRender as follows:

Code
1 protected override void OnPreRender (EventArgs e)
2 {
3//Determine if there is a locked column
4 bool Havelock=false;
5 Extcolumn Extcolumn;
6 int i;
7 for (i = 0; i < ColumnModel.Columns.Count; i++)
8 {
9 Extcolumn = columnmodel.columns[i] as Extcolumn;
Ten if (Extcolumn = null)
One break;
Or else if (extcolumn. Locked)
13 {
Havelock = true;
break;
16}
17}
18//Determine if there are multiple rows of headers
foreach (Plugin Plugin in Plugins)
20 {
if (plugin is Extgroupheadergrid)
22 {
23//If the table is locked, that same notification plugin is also required to lock the
24//Here is distinguished by a property
((Extgroupheadergrid) plugin). Locked = Havelock;
-Break;
27}
28}
29
System.ComponentModel.AttributeCollection Attrscoll = Typedescriptor.getattributes (this, true);
31
32//Register JS
if (Havelock)
34 {
35//Columns before locking columns must also be locked
for (int j = 0; J < i; J + +)
37 {
Extcolumn = Columnmodel.columns[j] as Extcolumn;
if (extcolumn!= null)
Extcolumn. Locked = Havelock;
41}
(Instanceofattribute) attrscoll[typeof (Instanceofattribute)). ClassName = "Ext.grid.LockingEditorGridPanel";
Scriptmanager.registerclientscriptinclude (base. GetType (), "CDPFLibrary.Build.extjs.Grid.LockingGridPanel.js");
44}
Or else
46 {
((Instanceofattribute) attrscoll[typeof (Instanceofattribute)). ClassName = "Coolite.Ext.GridPanel";
48}
49
Base. OnPreRender (e);
51}

At the same time, a number of new classes, the new categories are as follows: Excolumnmodel, Extcolumn, Extgridpanel, Extgroupheadergrid, Extrow, Extrowcollection, Extrows, Extrowscollection these, the specific code in the source can be analyzed by themselves.
Because the same table to support both locked and unlocked columns, because the function of different output JS is not the same, then Instanceofattribute ClassName class name to be changed, So you take the typedescriptor.getattributes to get the property so that you can save the custom property values that were modified by the current instance and use type. GetCustomAttributes to get only the value of the instance definition. The value of the current instance change cannot be obtained, which is to be modified in the Getclientconstructor method and instanceof property of the Webcontrol_helpers class of the Coolite.Ext.Web assembly. Personally think of it as an obvious bug.

In fact, the changes involved in a lot of places, the above is just the key point, the source code with the article released, Coolite source code can go to the official down, there are links below.