Hi Daniil:
I am using the following code to Create a Multi Group Header grid, the code works fine in Coolite 0.8 but in Coolite 1.0 it shows following errors like
1) Microsoft JScript runtime error: 'null' is null or not an object in rows.length (in renderHeaders: function)
2) Microsoft JScript runtime error: 'this.mainBody' is null or not an object
Pls help me on this, we are strucking in Migration of Coolite 1.0, we are in the midway of migration
Code to Multi Group Header grid
JsonReader jsonReader = new JsonReader();
RecordField RF1 = new RecordField();
RF1.Name = "ChartPosNo";
jsonReader.Fields.Add(RF1);
RecordField RF2 = new RecordField();
RF2.Name = "PosDesc";
jsonReader.Fields.Add(RF2);
RecordField RF3 = new RecordField();
RF3.Name = "Status";
jsonReader.Fields.Add(RF3);
RecordField RF4 = new RecordField();
RF4.Name = "Tolerance";
jsonReader.Fields.Add(RF4);
RecordField RF5 = new RecordField();
RF5.Name = "Comments";
jsonReader.Fields.Add(RF5);
RecordField RF8 = new RecordField();
RF8.Name = "MeasurementUnits";
jsonReader.Fields.Add(RF8);
Ext.Net.Column COL1 = new Ext.Net.Column();
this.gdMeasure.ColumnModel.Columns.Insert(0, COL1);
this.gdMeasure.ColumnModel.Columns[0].ColumnID = "ChartPosNo";
this.gdMeasure.ColumnModel.Columns[0].DataIndex = "ChartPosNo";
this.gdMeasure.ColumnModel.Columns[0].Header = "";
this.gdMeasure.ColumnModel.Columns[0].Align = Alignment.Right;
this.gdMeasure.ColumnModel.Columns[0].Width = 50;
Ext.Net.Column COL2 = new Ext.Net.Column();
this.gdMeasure.ColumnModel.Columns.Insert(1, COL2);
this.gdMeasure.ColumnModel.Columns[1].ColumnID = "PosDesc";
this.gdMeasure.ColumnModel.Columns[1].DataIndex = "PosDesc";
this.gdMeasure.ColumnModel.Columns[1].Header = "";
this.gdMeasure.ColumnModel.Columns[1].Width = 200;
Ext.Net.Column COL3 = new Ext.Net.Column();
this.gdMeasure.ColumnModel.Columns.Insert(2, COL3);
this.gdMeasure.ColumnModel.Columns[2].ColumnID = "Status";
this.gdMeasure.ColumnModel.Columns[2].DataIndex = "Status";
this.gdMeasure.ColumnModel.Columns[2].Header = "";
this.gdMeasure.ColumnModel.Columns[2].Renderer.Fn = "Status";
this.gdMeasure.ColumnModel.Columns[2].Width = 35;
Ext.Net.Column COL4 = new Ext.Net.Column();
this.gdMeasure.ColumnModel.Columns.Insert(3, COL4);
this.gdMeasure.ColumnModel.Columns[3].ColumnID = "Tolerance";
this.gdMeasure.ColumnModel.Columns[3].DataIndex = "Tolerance";
this.gdMeasure.ColumnModel.Columns[3].Header = CacheCaption.GetCaption("P-0088");
this.gdMeasure.ColumnModel.Columns[3].Width = 50;
ConfigItem Conobj = new ConfigItem();
Conobj.Name = "rows";
Conobj.Mode = ParameterMode.Raw;
string header1 = "[[{header: '" + CacheCaption.GetCaption("B-0166") + "', menuDisabled:true,colspan: 3, align: 'center'}";
string header2 = "[{header: ' ', colspan: 3, align: 'center',menuDisabled:true}";
string header3 = "[{header: ' ', colspan: 1, align: 'center'},{header: ' ', colspan: 1, align: 'center',menuDisabled:true},{header: '<img src=\u0022 images/icons/smiley_accept.png \u0022/>', colspan: 1, align: 'center',menuDisabled:true}";
header1 = header1 + ",{header: ' ', menuDisabled:true}";
header2 = header2 + ",{header: ' ', menuDisabled:true}";
header3 = header3 + ",{header: ' ', menuDisabled:true}";
int intColumn = 3;
if (intNoofSubs == 0)
intNoofSubs = 1;
int intHeadColumn = 1;
for (int intCounter = 0; intCounter < intNoofSubs; intCounter++)
{
RecordField RF = new RecordField();
RF.Name = "Soll" + (intCounter + 1);
jsonReader.Fields.Add(RF);
intColumn = intColumn + 1;
Ext.Net.Column COL = new Ext.Net.Column();
this.gdMeasure.ColumnModel.Columns.Insert(intColumn, COL);
this.gdMeasure.ColumnModel.Columns[intColumn].DataIndex = "Soll" + (intCounter + 1);
this.gdMeasure.ColumnModel.Columns[intColumn].Header = CacheCaption.GetCaption("B-0163");
this.gdMeasure.ColumnModel.Columns[intColumn].Align = Alignment.Right;
this.gdMeasure.ColumnModel.Columns[intColumn].Renderer.Fn = "DecDiffRender";
this.gdMeasure.ColumnModel.Columns[intColumn].Width = 50;
RecordField RF0 = new RecordField();
RF0.Name = "Ist" + (intCounter + 1);
jsonReader.Fields.Add(RF0);
intColumn = intColumn + 1;
Ext.Net.Column COL0 = new Ext.Net.Column();
this.gdMeasure.ColumnModel.Columns.Insert(intColumn, COL0);
this.gdMeasure.ColumnModel.Columns[intColumn].DataIndex = "Ist" + (intCounter + 1);
this.gdMeasure.ColumnModel.Columns[intColumn].Header = CacheCaption.GetCaption("B-0164");
this.gdMeasure.ColumnModel.Columns[intColumn].Align = Alignment.Right;
this.gdMeasure.ColumnModel.Columns[intColumn].Renderer.Fn = "DecDiffRender";
this.gdMeasure.ColumnModel.Columns[intColumn].Width = 50;
RecordField RF6 = new RecordField();
RF6.Name = "New" + (intCounter + 1);
jsonReader.Fields.Add(RF6);
intColumn = intColumn + 1;
Ext.Net.Column COL6 = new Ext.Net.Column();
this.gdMeasure.ColumnModel.Columns.Insert(intColumn, COL6);
this.gdMeasure.ColumnModel.Columns[intColumn].DataIndex = "New" + (intCounter + 1);
this.gdMeasure.ColumnModel.Columns[intColumn].Header = CacheCaption.GetCaption("CG-0038");
this.gdMeasure.ColumnModel.Columns[intColumn].Align = Alignment.Right;
this.gdMeasure.ColumnModel.Columns[intColumn].Renderer.Fn = "DecDiffRender";
this.gdMeasure.ColumnModel.Columns[intColumn].Width = 50;
RecordField RF7 = new RecordField();
RF7.Name = "Difference" + (intCounter + 1);
jsonReader.Fields.Add(RF7);
intColumn = intColumn + 1;
Ext.Net.Column COL7 = new Ext.Net.Column();
this.gdMeasure.ColumnModel.Columns.Insert(intColumn, COL7);
this.gdMeasure.ColumnModel.Columns[intColumn].DataIndex = "Difference" + (intCounter + 1);
this.gdMeasure.ColumnModel.Columns[intColumn].Header = CacheCaption.GetCaption("B-0165");
this.gdMeasure.ColumnModel.Columns[intColumn].Align = Alignment.Right;
this.gdMeasure.ColumnModel.Columns[intColumn].Renderer.Fn = "renderer";
this.gdMeasure.ColumnModel.Columns[intColumn].Width = 50;
header1 = header1 + ",{header: '" + intCounter + "', menuDisabled:true,colspan: 4, align: 'center'}";
if (arrSubMemo[intHeadColumn] != null)
{
if (arrSubMemo[intHeadColumn + 1].Trim() == "0")
header2 = header2 + ",{header: '" + arrSubMemo[intHeadColumn] + "', menuDisabled:true,colspan: 4, align: 'center'}";
else
header2 = header2 + ",{header: '<br>" + arrSubMemo[intHeadColumn] + "</br>', menuDisabled:true,colspan: 4, align: 'center'}";
}
else
header2 = header2 + ",{header: ' ', menuDisabled:true,colspan: 4, align: 'center'}";
header3 = header3 + ",{header: ' ', colspan: 1, align: 'center'},{header: '" + strSizeLayout + "', colspan: 1, align: 'center',menuDisabled:true},{header: ' ', colspan: 1, align: 'center',menuDisabled:true},{header: ' ', colspan: 1, align: 'center',menuDisabled:true}";
intHeadColumn = intHeadColumn + 3;
}
intColumn = intColumn + 1;
Ext.Net.Column COL5 = new Ext.Net.Column();
this.gdMeasure.ColumnModel.Columns.Insert(intColumn, COL5);
this.gdMeasure.ColumnModel.Columns[intColumn].ColumnID = "Comments";
this.gdMeasure.ColumnModel.Columns[intColumn].DataIndex = "Comments";
this.gdMeasure.ColumnModel.Columns[intColumn].Header = CacheCaption.GetCaption("CG-0122");
this.gdMeasure.ColumnModel.Columns[intColumn].Width = 150;
storeMeasure.Reader.Add(jsonReader);
objAMChart.AMCollectionNo = objQuality.CollectionNo;
objAMChart.AMArticleNo = objQuality.ArticleNo;
objAMChart.AMQualityVersionID = objQuality.QualityVersionId.ToString();
objAMChart.AMVersionNo = objQuality.VersionNo;
AMChartList = objAMChart.GetQualityAMChartData();
gdMeasure.AutoExpandColumn = "Comments";
storeMeasure.DataSource = AMChartList;
storeMeasure.DataBind();
header1 = header1 + ",{header: ' ', menuDisabled:true}],";
header2 = header2 + ",{header: ' ', menuDisabled:true}],";
header3 = header3 + ",{header: ' ', menuDisabled:true}]]";
Conobj.Value = header1 + header2 + header3;
GenericPlugin.Config objGenericConfig = new GenericPlugin.Config();
objGenericConfig.InstanceName = "Ext.ux.plugins.GroupHeaderGrid";
objGenericConfig.CustomConfig.Add(Conobj);
GenericPlugin objGroupPlugin = new GenericPlugin(objGenericConfig);
gdMeasure.Plugins.Add(objGroupPlugin);
Javascript for Multi Group header creation
GroupHeaderPlugin.js
Ext.namespace("Ext.ux.plugins");
Ext.ux.plugins.GroupHeaderGrid = function(config) {
this.config = config;
};
Ext.extend(Ext.ux.plugins.GroupHeaderGrid, Ext.util.Observable, {
init: function(grid) {
Ext.applyIf(grid.colModel, this.config);
Ext.apply(grid.getView(), this.viewConfig);
},
viewConfig: {
initTemplates: function() {
this.constructor.prototype.initTemplates.apply(this, arguments);
var ts = this.templates || {};
if (!ts.gcell) {
ts.gcell = new Ext.XTemplate(
'<td class="x-grid3-hd {cls} x-grid3-td-{id} ux-grid-hd-group-row-{row}" style="{style}">',
'<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">',
'<tpl if="values.btn"><a class="x-grid3-hd-btn" href="#"></a></tpl>',
'{value}</div>',
'</td>'
);
}
this.templates = ts;
this.hrowRe = new RegExp("ux-grid-hd-group-row-(\\d+)", "");
},
renderHeaders: function() {
var ts = this.templates, headers = [], cm = this.cm, rows = cm.rows, tstyle = 'width:' + this.getTotalWidth() + ';';
for (var row = 0, rlen = rows.length; row < rlen; row++) {
var r = rows[row], cells = [];
for (var i = 0, gcol = 0, len = r.length; i < len; i++) {
var group = r[i];
group.colspan = group.colspan || 1;
var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol);
var gs = Ext.ux.plugins.GroupHeaderGrid.prototype.getGroupStyle.call(this, group, gcol);
cells[i] = ts.gcell.apply({
cls: group.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell',
id: id,
row: row,
style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (group.align ? 'text-align:' + group.align + ';' : ''),
tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + group.tooltip + '"' : '',
istyle: group.align == 'right' ? 'padding-right:16px' : '',
btn: this.grid.enableHdMenu && group.header && (group.menuDisabled !== true),
value: group.header || ' '
});
gcol += group.colspan;
}
headers[row] = ts.header.apply({
tstyle: tstyle,
cells: cells.join('')
});
}
headers.push(this.constructor.prototype.renderHeaders.apply(this, arguments));
return headers.join('');
},
onColumnWidthUpdated : function(){
this.constructor.prototype.onColumnWidthUpdated.apply(this, arguments);
Ext.ux.plugins.GroupHeaderGrid.prototype.updateGroupStyles.call(this);
},
onAllColumnWidthsUpdated : function(){
this.constructor.prototype.onAllColumnWidthsUpdated.apply(this, arguments);
Ext.ux.plugins.GroupHeaderGrid.prototype.updateGroupStyles.call(this);
},
onColumnHiddenUpdated : function(){
this.constructor.prototype.onColumnHiddenUpdated.apply(this, arguments);
Ext.ux.plugins.GroupHeaderGrid.prototype.updateGroupStyles.call(this);
},
getHeaderCell : function(index){
return this.mainHd.query(this.cellSelector)[index];
},
findHeaderCell : function(el){
return el ? this.fly(el).findParent('td.x-grid3-hd', this.cellSelectorDepth) : false;
},
findHeaderIndex : function(el){
var cell = this.findHeaderCell(el);
return cell ? this.getCellIndex(cell) : false;
},
updateSortIcon : function(col, dir){
var sc = this.sortClasses;
var hds = this.mainHd.select(this.cellSelector).removeClass(sc);
hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
},
beforeColMenuShow : function(){
var cm = this.cm, rows = this.cm.rows;
this.colMenu.removeAll();
for(var col = 0, clen = cm.getColumnCount(); col < clen; col++){
var menu = this.colMenu, text = cm.getColumnHeader(col);
if(cm.config[col].fixed !== true && cm.config[col].hideable !== false){
for (var row = 0, rlen = rows.length; row < rlen; row++) {
var r = rows[row], group, gcol = 0;
for (var i = 0, len = r.length; i < len; i++) {
group = r[i];
if (col >= gcol && col < gcol + group.colspan) {
break;
}
gcol += group.colspan;
}
if (group && group.header) {
if (cm.hierarchicalColMenu) {
var gid = 'group-' + row + '-' + gcol;
var item = menu.items.item(gid);
var submenu = item ? item.menu : null;
if (!submenu) {
submenu = new Ext.menu.Menu({id: gid});
submenu.on("itemclick", this.handleHdMenuClick, this);
menu.add({id: gid, text: group.header, menu: submenu});
}
menu = submenu;
} else {
text = group.header + ' ' + text;
}
}
}
menu.add(new Ext.menu.CheckItem({
id: "col-"+cm.getColumnId(col),
text: text,
checked: !cm.isHidden(col),
hideOnClick:false,
disabled: cm.config[col].hideable === false
}));
}
}
},
renderUI : function(){
this.constructor.prototype.renderUI.apply(this, arguments);
Ext.apply(this.columnDrop, Ext.ux.plugins.GroupHeaderGrid.prototype.columnDropConfig);
}
},
columnDropConfig : {
getTargetFromEvent : function(e){
var t = Ext.lib.Event.getTarget(e);
return this.view.findHeaderCell(t);
},
positionIndicator : function(h, n, e){
var data = Ext.ux.plugins.GroupHeaderGrid.prototype.getDragDropData.call(this, h, n, e);
if (data === false) {
return false;
}
var px = data.px + this.proxyOffsets[0];
this.proxyTop.setLeftTop(px, data.r.top + this.proxyOffsets[1]);
this.proxyTop.show();
this.proxyBottom.setLeftTop(px, data.r.bottom);
this.proxyBottom.show();
return data.pt;
},
onNodeDrop : function(n, dd, e, data){
var h = data.header;
if(h != n){
var d = Ext.ux.plugins.GroupHeaderGrid.prototype.getDragDropData.call(this, h, n, e);
if (d === false) {
return false;
}
var cm = this.grid.colModel, right = d.oldIndex < d.newIndex, rows = cm.rows;
for (var row = d.row, rlen = rows.length; row < rlen; row++) {
var r = rows[row], len = r.length, fromIx = 0, span = 1, toIx = len;
for (var i = 0, gcol = 0; i < len; i++) {
var group = r[i];
if (d.oldIndex >= gcol && d.oldIndex < gcol + group.colspan) {
fromIx = i;
}
if (d.oldIndex + d.colspan - 1 >= gcol && d.oldIndex + d.colspan - 1 < gcol + group.colspan) {
span = i - fromIx + 1;
}
if (d.newIndex >= gcol && d.newIndex < gcol + group.colspan) {
toIx = i;
}
gcol += group.colspan;
}
var groups = r.splice(fromIx, span);
rows[row] = r.splice(0, toIx - (right ? span : 0)).concat(groups).concat(r);
}
for (var c = 0; c < d.colspan; c++) {
var oldIx = d.oldIndex + (right ? 0 : c), newIx = d.newIndex + (right ? -1 : c);
cm.moveColumn(oldIx, newIx);
this.grid.fireEvent("columnmove", oldIx, newIx);
}
return true;
}
return false;
}
},
getGroupStyle: function(group, gcol) {
var width = 0, hidden = true;
for (var i = gcol, len = gcol + group.colspan; i < len; i++) {
if (!this.cm.isHidden(i)) {
var cw = this.cm.getColumnWidth(i);
if(typeof cw == 'number'){
width += cw;
}
hidden = false;
}
}
return {
width: (Ext.isBorderBox ? width : Math.max(width - this.borderWidth, 0)) + 'px',
hidden: hidden
};
},
updateGroupStyles: function(col) {
var tables = this.mainHd.query('.x-grid3-header-offset > table'), tw = this.getTotalWidth(), rows = this.cm.rows;
for (var row = 0; row < tables.length; row++) {
tables[row].style.width = tw;
if (row < rows.length) {
var cells = tables[row].firstChild.firstChild.childNodes;
for (var i = 0, gcol = 0; i < cells.length; i++) {
var group = rows[row][i];
if ((typeof col != 'number') || (col >= gcol && col < gcol + group.colspan)) {
var gs = Ext.ux.plugins.GroupHeaderGrid.prototype.getGroupStyle.call(this, group, gcol);
cells[i].style.width = gs.width;
cells[i].style.display = gs.hidden ? 'none' : '';
}
gcol += group.colspan;
}
}
}
},
getGroupRowIndex : function(el){
if(el){
var m = el.className.match(this.hrowRe);
if(m && m[1]){
return parseInt(m[1], 10);
}
}
return this.cm.rows.length;
},
getGroupSpan : function(row, col) {
if (row < 0) {
return {col: 0, colspan: this.cm.getColumnCount()};
}
var r = this.cm.rows[row];
if (r) {
for(var i = 0, gcol = 0, len = r.length; i < len; i++) {
var group = r[i];
if (col >= gcol && col < gcol + group.colspan) {
return {col: gcol, colspan: group.colspan};
}
gcol += group.colspan;
}
return {col: gcol, colspan: 0};
}
return {col: col, colspan: 1};
},
getDragDropData : function(h, n, e){
if (h.parentNode != n.parentNode) {
return false;
}
var cm = this.grid.colModel;
var x = Ext.lib.Event.getPageX(e);
var r = Ext.lib.Dom.getRegion(n.firstChild);
var px, pt;
if((r.right - x) <= (r.right-r.left)/2){
px = r.right+this.view.borderWidth;
pt = "after";
}else{
px = r.left;
pt = "before";
}
var oldIndex = this.view.getCellIndex(h);
var newIndex = this.view.getCellIndex(n);
if(cm.isFixed(newIndex)){
return false;
}
var row = Ext.ux.plugins.GroupHeaderGrid.prototype.getGroupRowIndex.call(this.view, h);
var oldGroup = Ext.ux.plugins.GroupHeaderGrid.prototype.getGroupSpan.call(this.view, row, oldIndex);
var newGroup = Ext.ux.plugins.GroupHeaderGrid.prototype.getGroupSpan.call(this.view, row, newIndex);
oldIndex = oldGroup.col;
newIndex = newGroup.col + (pt == "after" ? newGroup.colspan : 0);
if(newIndex >= oldGroup.col && newIndex <= oldGroup.col + oldGroup.colspan){
return false;
}
var parentGroup = Ext.ux.plugins.GroupHeaderGrid.prototype.getGroupSpan.call(this.view, row - 1, oldIndex);
if (newIndex < parentGroup.col || newIndex > parentGroup.col + parentGroup.colspan) {
return false;
}
return {
r: r,
px: px,
pt: pt,
row: row,
oldIndex: oldIndex,
newIndex: newIndex,
colspan: oldGroup.colspan
};
}
});