PDA

View Full Version : Ext.ux.tree.TreeGrid with many columns bug?



rastafarra
9 Feb 2010, 12:21 PM
hi.

i use this component with a large number of large columns. when the tree does not fit the width of the screen, a horizontal scroll bar is enabled. the title of the tree does not notice the column width and fits within the width of the screen, but the column with values beyond the screen.

part of my code:


tree = new Ext.ux.tree.TreeGrid({
title: 'big tree',
enableSort : false,
autoScroll : true,
renderTo: Ext.getBody(),

columns:[
{ header: 'big header',
width: 250,
dataIndex: 'Ind',
sortType: 'none' },
{ header: 'header',
width: 150,
dataIndex: 'Ind',
sortType: 'none' },
{ header: 'header',
width: 150,
dataIndex: 'Ind',
sortType: 'none' },
{ header: 'header',
dataIndex: 'Ind',
width: 100,
sortType: 'none' },
{ header: 'hd',
width: 100,
dataIndex: 'Ind',
sortType: 'none'},
{ header: 'hd',
width: 100,
dataIndex: 'Ind',
sortType: 'none'},
{ header: 'header ',
width: 100,
dataIndex: 'Ind',
sortType: 'none'},
{ header: 'header ',
width: 100,
dataIndex: 'Ind',
sortType: 'none'},
{ header: 'header',
width: 100,
dataIndex: 'Ind',
sortType: 'none'},
{ header: 'header',
width: 100,
dataIndex: 'Ind',
sortType: 'none'},
{ header: 'header',
width: 200,
dataIndex: 'Ind',
sortType: 'none'},
{ header: 'header ',
width: 200,
dataIndex: 'Ind',
sortType: 'none'},
{ header: 'header',
width: 200,
dataIndex: 'Ind',
sortType: 'none'},
{ header: 'header',
width: 200,
dataIndex: 'Ind',
sortType: 'none'},
]
});


?ow can i set the column width, together with the title?

mjaomaha
18 Feb 2010, 9:31 AM
I have noticed that the horizontal scroll doesn't work until there are actually rows of data. It appears the width of the row of data actually makes the parent panel realize it needs a scroll bar, but the width of the columns do not.

sideeque
21 May 2010, 7:43 AM
I have the same problem.

The total width of the grid/tree is 320.

And total width of each column is 500.

I am expecting a horizontal scroll to be there to see the portion which exceeds 320 width of Grid/Tree.


Does anybody have fix for this?

Nesta
21 May 2010, 11:29 AM
i had similar problems with the width of my TreeGrid and wrote a Extension that allows you to define
a flex value for every column. Now my TreeGrid always fits the available size, maybe thats a workaround
for your problem too.

Note: you can define flex values that add up to more than 1, but on the first call of updateColumnWidths it will be "normalized" to 1.



updateColumnWidths : function() {
var totalWidth = this.getWidth() - 30;
var cols = this.columns,
colCount = cols.length,
groups = this.outerCt.query('colgroup'),
groupCount = groups.length,
c, g, i, j;

var totalFlex = 0;
for(i = 0; i<colCount; i++) {
totalFlex += cols[i].flex;
}
if(totalFlex!=1){
for(i = 0; i<colCount; i++) {
cols[i].flex = cols[i].flex/totalFlex;
}
}

for(i = 0; i<colCount; i++) {
c = cols[i];
if(c.width && Math.abs(c.width-totalWidth*c.flex)>2){
var newFlex = (c.width/totalWidth);
if(i<(colCount-1)){
cols[(i+1)].flex += (c.flex - newFlex);
cols[(i+1)].width = totalWidth * cols[(i+1)].flex;
}
c.flex = newFlex;
}
c.width = totalWidth*c.flex;
for(j = 0; j<groupCount; j++) {
g = groups[j];
g.childNodes[i].style.width = (c.hidden ? 0 : c.width) + 'px';
}
}
var len;
for(i = 0, groups = this.innerHd.query('td'), len = groups.length; i<len; i++) {
c = Ext.fly(groups[i]);
if(cols[i] && cols[i].hidden) {
c.addClass('x-treegrid-hd-hidden');
}
else {
c.removeClass('x-treegrid-hd-hidden');
}
}

var tcw = this.getTotalColumnWidth();
Ext.fly(this.innerHd.dom.firstChild).setWidth(tcw + (this.scrollOffset || 0));
this.outerCt.select('table').setWidth(tcw);
this.syncHeaderScroll();
},


[EDIT] Putting the code in updateColumnWidth will disable column resizing if you have more then 2 columns

Werzi2001
3 Jul 2010, 4:49 AM
Hi Nesta,

could you please post the complete code of your resizing ColumnTree? If i just add your updateColumnWidths i only get errors about undefined things (innerHd, outerCt and so on).

Thanks!

Yours
Thomas