PDA

View Full Version : ColumnTree with frozen headers



flyzb
8 May 2008, 6:41 AM
I want a columnTree with frozen headers.Here is my code,it works fine.

xt.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
lines:false,
borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
cls:'x-column-tree',

onRender : function(){
Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
this.body.setOverflow('auto');
this.headers = this.body.createChild(
{cls:'x-tree-headers'},this.innerCt.dom);

var cols = this.columns, c;
var totalWidth = 0;

for(var i = 0, len = cols.length; i < len; i++){
c = cols[i];
totalWidth += c.width;
this.headers.createChild({
cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
cn: {
cls:'x-tree-hd-text',
html: c.header
},
style:'width:'+(c.width-this.borderWidth)+'px;'
});
}
this.headers.createChild({cls:'x-clear'});
// prevent floats from wrapping when clipped
this.headers.setWidth(totalWidth);
this.innerCt.setWidth(totalWidth);

this.body.on('scroll',this.headersScroll, this);
},
headersScroll : function(){
if(this.headers.getTop(false)!=26)
this.headers.setY(26);
}
});

soreport
8 May 2008, 5:19 PM
Nice work,thanks!

fangzhouxing
17 May 2008, 6:07 PM
sorry,but I don't understand what 'frozen headers' means.

JamesC
19 May 2008, 2:32 AM
Headers that stay at the top when you scroll (rather than disappearing after vertical scroll)

wm003
20 May 2008, 4:13 AM
Just change the following lines from the example file ColumnNodeUI.js



// this.headers = this.body.createChild(
// {cls:'x-tree-headers'},this.innerCt.dom);

this.headers = this.getEl().createChild(
{cls:'x-tree-headers'},this.body); And the Headers are fixed...

boater21
30 Jul 2008, 7:30 AM
Bummer, I can't get either solution to work for me. I'll mess with it a bit more, but the header just scrolls along with the rest of the tree.

mviens
13 Oct 2008, 4:04 PM
Just change the following lines from the example file ColumnNodeUI.js



// this.headers = this.body.createChild(
// {cls:'x-tree-headers'},this.innerCt.dom);

this.headers = this.getEl().createChild(
{cls:'x-tree-headers'},this.body); And the Headers are fixed...

While this does work nicely, you lose the bottom border line of the ColumnTree. I tried to fix this but had no success. Anyone else? This was on Ext 2.2 and IE7 and FF3.

Mike V.

jamey_cai
9 Sep 2009, 1:08 AM
Just change the following lines from the example file ColumnNodeUI.js



// this.headers = this.body.createChild(
// {cls:'x-tree-headers'},this.innerCt.dom);

this.headers = this.getEl().createChild(
{cls:'x-tree-headers'},this.body); And the Headers are fixed...



file:///C:/DOCUME%7E1/Jamey/LOCALS%7E1/Temp/moz-screenshot.jpgAlthough the header can be fixed, but the scroll bar columnTree than body height.:((

redsun
5 Nov 2009, 2:44 AM
Excuse me for digging up an old thread, but there is a fast and easy solution to this problem.

The problem is: the frozen header code works fine, but the scrollbar renders incorrectly. In order to fix this you can just resize the body height and it should work.

Adjusted code, based on the working example of ColumnTree (here (http://www.extjs.com/deploy/dev/examples/tree/column-tree.html)), and this thread:



Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
lines: false,
borderWidth: Ext.isBorderBox ? 0 : 2,
// the combined left/right border for each cell
cls: 'x-column-tree',
onRender: function () {
Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
this.headers = this.getEl().createChild({
cls: 'x-tree-headers'
},
this.body);
// Boolean to manipulate the body
var lFixed = false;
var cols = this.columns,
c;
var totalWidth = 0;
var scrollOffset = 19; // similar to Ext.grid.GridView default
for (var i = 0, len = cols.length; i < len; i++) {
c = cols[i];
totalWidth += c.width;
this.headers.createChild({
cls: 'x-tree-hd ' + (c.cls ? c.cls + '-hd' : ''),
cn: {
cls: 'x-tree-hd-text',
html: c.header
},
style: 'width:' + (c.width - this.borderWidth) + 'px;'
});
}
this.headers.createChild({
cls: 'x-clear'
});
// prevent floats from wrapping when clipped
this.headers.setWidth(totalWidth + scrollOffset);
this.innerCt.setWidth(totalWidth);
this.on('load', this.fixScroll, this);
Ext.apply(this, {
isFixed: function () {
return lFixed;
},
setFixed: function (value) {
lFixed = value;
}
});
},
fixScroll: function () {
// Only fix the height once when loading data, if not the component will shrink every time a node is expanded
if (!this.isFixed()) this.body.setHeight(this.body.getHeight() - 22);
this.setFixed(true);
}
});

deepanshu
11 Mar 2010, 1:28 PM
:-? Still doesn't work for me, the component shrinks every time a node is expanded.

hanliang
29 Apr 2010, 11:18 PM
:-? Still doesn't work for me, the component shrinks every time a node is expanded.
......
this.on('resize', this.fixScroll, this);
Ext.apply(this, {
isFixed: function () {
return this.lFixed;
},
setFixed: function (value) {
lFixed = value;
}
});
},
fixScroll: function () {
// Only fix the height once when loading data, if not the component will shrink every time a node is expanded
if (!this.isFixed()) this.body.setHeight(this.body.getHeight() - 22);
this.setFixed(false);
}

hanliang
29 Apr 2010, 11:24 PM
......
this.on('resize', this.fixScroll, this);
Ext.apply(this, {
isFixed: function () {
return this.lFixed;
},
setFixed: function (value) {
lFixed = value;
}
});
},
fixScroll: function () {
// Only fix the height once when loading data, if not the component will shrink every time a node is expanded
if (!this.isFixed()) this.body.setHeight(this.body.getHeight() - 22);
this.setFixed(false);
}

anlina
22 Oct 2010, 1:57 AM
It is not perfect. if I want the column scrolling by the horizontal scroll bar just like the treegrid, how can I do?

ps: I now use ext.2.1

hanliang
13 Dec 2010, 2:44 AM
//overwrite columnTree(solve the fixed head and appear the column scrolling by the horizontal scroll bar just like the treegrid)
Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
lines: false,
borderWidth: Ext.isBorderBox ? 0 : 2,
// the combined left/right border for each cell
cls: 'x-column-tree',
onRender: function () {
Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
this.headers = this.getEl().createChild({
cls: 'x-tree-headers'
},
this.body);
// Boolean to manipulate the body
var lFixed = false;
var cols = this.columns,
c;
var totalWidth = 0;
var scrollOffset = 19; // similar to Ext.grid.GridView default
for (var i = 0, len = cols.length; i < len; i++) {
c = cols[i];
totalWidth += c.width;
this.headers.createChild({
cls: 'x-tree-hd ' + (c.cls ? c.cls + '-hd' : ''),
cn: {
align:c.align,
cls: 'x-tree-hd-text',
html: c.header
},
style: 'width:' + (c.width - this.borderWidth) + 'px;'
});
}
this.headers.createChild({
cls: 'x-clear'
});
// The following code: appear the horizontal scroll bar --start
this.body.parent().setStyle('overflowY','hidden');
this.body.parent().setStyle('overflow-x','auto');
this.body.parent().setHeight(this.ownerCt.body.getHeight());
this.body.setHeight(this.body.getHeight());
// The following code: appear the horizontal scroll bar --end
// prevent floats from wrapping when clipped
this.headers.setWidth(totalWidth + scrollOffset);
this.innerCt.setWidth(totalWidth);
this.on('resize', this.fixScroll, this);//scroll bar is correct when the container of columnTree is resized
Ext.apply(this, {
isFixed: function () {
return this.lFixed;
},
setFixed: function (value) {
lFixed = value;
}
});
this.renderFirst=true;// It was first rendered
},
fixScroll: function (component ,adjWidth,adjHeight,rawWidth,rawHeight) {
//The following code: appear the horizontal scroll bar --start
if(Ext.isIE){
if(adjHeight!=this.body.parent().getHeight()||this.renderFirst){//don't minus the height of header when it was first rendered,it need to minus the height of header whe the window is resized
this.body.setHeight(adjHeight-(this.headers.getHeight()-4));
}else{
this.body.setHeight(adjHeight);
};
this.body.parent().setWidth(adjWidth);// appear horizontal scroll bar for ie
}else{
this.body.setHeight(adjHeight-(this.headers.getHeight()-4));
this.body.setWidth(this.headers.getWidth());
};
this.body.setWidth(this.headers.getWidth());
this.body.parent().setHeight(adjHeight);
// The following code: appear the horizontal scroll bar --end
// Only fix the height once when loading data, if not the component will shrink every time a node is expanded
if (!this.isFixed()) this.body.setHeight(this.body.getHeight() - 22),this.body.dom.style.overflowX = 'hidden';
this.setFixed(false);
this.renderFirst=false;// It was false
}
});

it work nice in my project in ie6,7,8 and firefox 3.0.19