PDA

View Full Version : [OPEN-655] Tree Grid Alignment



erojas
24 Feb 2010, 9:39 AM
Version Extjs 3.1


css used: ext-all.css

Browser
IE7

S.O
WinXP Pro

Description:
There is a problem width header align and cell align in TreeGrid extension.

Test Case:




/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com

* http://www.extjs.com/license
*/

Ext.onReady(function() {
Ext.QuickTips.init();

var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 800,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,

columns:[{
header: 'Task',
dataIndex: 'task',
width: 130
},{
header: 'Duration',
width: 50,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
header: 'Assigned To',
width: 50,
dataIndex: 'user'

},{
header: 'Assigned To',
width: 50,
dataIndex: 'prueba1'

},{
header: 'Assigned To',
width: 50,
dataIndex: 'prueba2'

},{
header: 'Assigned To',
width: 50,
dataIndex: 'prueba3'

},{
header: 'Assigned To',
width: 50,
dataIndex: 'prueba3'

}],

dataUrl: 'treegrid-data.json'

});
});


_______________________________treegrid-data.json_____________________

[{
task:'Project: Shopping',
duration:13.25,
user:'Tommy Maintz',
iconCls:'task-folder',
expanded: true,
children:[{
task:'Housewares',
duration:1.25,
user:'Tommy Maintz',
iconCls:'task-folder',
children:[{
task:'Kitchen supplies',
duration:0.25,
user:'Tommy Maintz',
prueba1:'prueba1',
prueba2:'prueba2',
prueba3:'prueba3',
prueba4:'prueba4',
leaf:true,
iconCls:'task'
},{
task:'Groceries',
duration:.4,
user:'Tommy Maintz',
leaf:true,
iconCls:'task'
},{
task:'Cleaning supplies',
duration:.4,
user:'Tommy Maintz',
leaf:true,
iconCls:'task'
},{
task: 'Office supplies',
duration: .2,
user: 'Tommy Maintz',
leaf: true,
iconCls: 'task'
}]
}, {
task:'Remodeling',
duration:12,
user:'Tommy Maintz',
iconCls:'task-folder',
expanded: true,
children:[{
task:'Retile kitchen',
duration:6.5,
user:'Tommy Maintz',
leaf:true,
iconCls:'task'
},{
task:'Paint bedroom',
duration: 2.75,
user:'Tommy Maintz',
iconCls:'task-folder',
children: [{
task: 'Ceiling',
duration: 1.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}, {
task: 'Walls',
duration: 1.5,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}]
},{
task:'Decorate living room',
duration:2.75,
user:'Tommy Maintz',
leaf:true,
iconCls:'task'
},{
task: 'Fix lights',
duration: .75,
user: 'Tommy Maintz',
leaf: true,
iconCls: 'task'
}, {
task: 'Reattach screen door',
duration: 2,
user: 'Tommy Maintz',
leaf: true,
iconCls: 'task'
}]
}]
},{
task:'Project: Testing',
duration:2,
user:'Core Team',
iconCls:'task-folder',
children:[{
task: 'Mac OSX',
duration: 0.75,
user: 'Tommy Maintz',
iconCls: 'task-folder',
children: [{
task: 'FireFox',
duration: 0.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}, {
task: 'Safari',
duration: 0.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}, {
task: 'Chrome',
duration: 0.25,
user: 'Tommy Maintz',
iconCls: 'task',
leaf: true
}]
},{
task: 'Windows',
duration: 3.75,
user: 'Darrell Meyer',
iconCls: 'task-folder',
children: [{
task: 'FireFox',
duration: 0.25,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
}, {
task: 'Safari',
duration: 0.25,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
}, {
task: 'Chrome',
duration: 0.25,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
},{
task: 'Internet Exploder',
duration: 3,
user: 'Darrell Meyer',
iconCls: 'task',
leaf: true
}]
},{
task: 'Linux',
duration: 0.5,
user: 'Aaron Conran',
iconCls: 'task',
children: [{
task: 'FireFox',
duration: 0.25,
user: 'Aaron Conran',
iconCls: 'task',
leaf: true
}, {
task: 'Chrome',
duration: 0.25,
user: 'Aaron Conran',
iconCls: 'task',
leaf: true
}]
}]
}]

See this URL : http://


reproduce the problem:

1.- Modify example treegrid.js, add some columns with diferent width
2.- add treegrid-data.json, values
3.- If TreeGrid show horizontal scrollbar, header title are not refreshed, I have to move mouse over header to refresh titles

The result that was expected:
TreeGrid header and cells must be aligment and header's title have to be refreshed


The result that occurs instead:
TreeGrid header' titles and cell content are not aligment and if you move scroll (left, right) header's titles are not refreshed.

hhangus
3 Mar 2010, 4:47 PM
I can confirm this bug, but it's not caused by the fields expanding to far horizontally. This is caused by the columns being sized smaller than the header text, or when a column is hidden.

I'm not exactly sure where the bug is but the basic problem seems to be that the width of the columns below the header are allowed to shrink smaller than the header text, while the header is not allowed to be smaller than it's text, resulting in header widths that are no longer in sync with their columns.

I'd love to see this fixed since it's been a thorn for me for months already. Thankfully, my users are generally using 24" monitors so they rarely shrink columns ;)

erojas
9 Mar 2010, 7:34 AM
Some body could help me with this bug?

Thx!!!

jax_meister
10 Mar 2010, 12:02 PM
I was able to make it work better (with help from Ext support) by doing two things. I added a class (x-treegrid-table) on the first table in TreeGrid.internalTpl and I changed TreeGrid.onResize. Hope it helps...

The css


.ext-ie .x-treegrid-table {
border-collapse: collapse;
border-spacing: 0 0;
}


Add the class to the first table in TreeGrid.internalTpl


this.internalTpl = new Ext.XTemplate(
'<div class="x-grid3-header">',
'<div class="x-treegrid-header-inner">',
'<div class="x-grid3-header-offset">',
'<table cellspacing="0" cellpadding="0" border="0" class="x-treegrid-table"> ...


Override onResize


Ext.override(Ext.ux.tree.TreeGrid, {
onResize: function(w, h) {
Ext.ux.tree.TreeGrid.superclass.onResize.apply(this, arguments);

var bd = this.innerBody.dom;
var hd = this.innerHd.dom;

if (!bd) {
return;
}

if (Ext.isNumber(h)) {
bd.style.height = this.body.getHeight(true) - hd.offsetHeight + 'px';
}

if (Ext.isNumber(w)) {
if (Ext.isIE && !(Ext.isStrict && Ext.isIE8)) {
var bdWith = this.body.getWidth(true) + 'px';
bd.style.width = bdWith;
hd.style.width = bdWith;
}
var sw = Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
if (this.reserveScrollOffset || ((bd.offsetWidth - bd.clientWidth) > 10)) {
this.setScrollOffset(sw);
} else {
var me = this;
setTimeout(function() {
me.setScrollOffset(bd.offsetWidth - bd.clientWidth > 10 ? sw : 0);
}, 10);
}
}
}
});

hhangus
10 Mar 2010, 3:17 PM
Erm...I'm not sure what your fix is supposed to do but it doesn't appear to do anything for me in either IE7/8 or Firefox.

In any case, I've gone over the code and found the bug. It is in the template code, but it's so stupidly simple I suspect it was just an oversight by the developer(s).



this.internalTpl = new Ext.XTemplate(
'<div class="x-grid3-header">',
'<div class="x-treegrid-header-inner">',
'<div class="x-grid3-header-offset">',
'<table cellspacing="0" cellpadding="0" border="0" style="table-layout: fixed;">
...


The column table has the style "table-layout:fixed;" but the headers table did not. It needs to be 'fixed' in order to force the column size to cut off the column contents. With the red code above applied column sizing and hiding now work as expected in both IE and Fx.

j.bruni
8 Jul 2010, 9:57 AM
With the red code above applied column sizing and hiding now work as expected in both IE and Fx.

Hey! Fantastic! This worked for me! Thanks, hhangus!

I have no CSS knowledge to understand what it does... but the problem disappeared. =D>