Feb 08, 2011, 6:05 PM
TreeGrid : Header Layout ReRender
I have implemented my own version of Column Drag and Drop on the TreeGrid.
I need help on "redrawing" the column headers of the TreeGrid. After I have reorganized treeGrid.columns in the new order, how do I go then in recreating just the Header?
I've looked at the TreeGrid's onRender to see how it creates the Header elements:
I have everything working except I'm getting stumped on recreating the header without recreating the whole treeGrid control.
Please let me know if you have any suggestions.
I need help on "redrawing" the column headers of the TreeGrid. After I have reorganized treeGrid.columns in the new order, how do I go then in recreating just the Header?
I've looked at the TreeGrid's onRender to see how it creates the Header elements:
onRender : function () {
Ext.tree.TreePanel.superclass.onRender.apply(this, arguments);
this.el.addClass('x-treegrid');
this.outerCt = this.body.createChild({
cls:'x-tree-root-ct x-treegrid-ct ' + (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')
});
this.internalTpl.overwrite(this.outerCt, {columns: this.columns});
this.mainHd = Ext.get(this.outerCt.dom.firstChild);
this.innerHd = Ext.get(this.mainHd.dom.firstChild);
this.innerBody = Ext.get(this.outerCt.dom.lastChild);
this.innerCt = Ext.get(this.innerBody.dom.firstChild);
this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
if (this.hideHeaders) {
this.el.child('.x-grid3-header').setDisplayed('none');
}
else if (this.enableHdMenu !== false) {
this.hmenu = new Ext.menu.Menu({id: this.id + '-hctx'});
if (this.enableColumnHide !== false) {
this.colMenu = new Ext.menu.Menu({id: this.id + '-hcols-menu'});
this.colMenu.on({
scope: this,
beforeshow: this.beforeColMenuShow,
itemclick: this.handleHdMenuClick
});
this.hmenu.add({
itemId:'columns',
hideOnClick: false,
text: this.columnsText,
menu: this.colMenu,
iconCls: 'x-cols-icon'
});
}
this.hmenu.on('itemclick', this.handleHdMenuClick, this);
}
this.updateColumnWidths();
}
Is there a simplified way of recreating the header that correctly shows the new order of this.columns?I have everything working except I'm getting stumped on recreating the header without recreating the whole treeGrid control.
Please let me know if you have any suggestions.