How to align treegrid columns

Question

Even though each of my columns is set at a fixed pixel width, my treegrid columns are all over the place (i.e. not aligning in a straight line). Please see screenshot which illustrates issue. Also, below is an overview of the code for the treegrid. Any ideas on how to fix this issue?

var currentdate = new Date();

var currenthour = currentdate.format('G');
var intcurrenthour = parseInt(currenthour);
intcurrenthour = intcurrenthour + 1; 

var currentday = currentdate.format('D M j Y'); 
var basecolor = "#FFFFFF";
var currentcolor = "#F0F0F0";
var i = 0;
var x;

function fn(v, values){

    if(i == 3){i = 0}

    i = i + 1;

    switch(i){
        case 1: x = values.alarm1; break;
        case 2: x = values.alarm2; break;
        case 3: x = values.alarm3; break;

        default: alert("x not assigned value");
    }

    if (x == 1) {return '<span style="background-color: red; width: 100%">' + v + '</span>';}
    else if(i == intcurrenthour)
        {return '<span style="background-color:' + currentcolor + '; width: 100%">' + v + '</span>';}
        else
        {return '<span style="background-color:' + basecolor + '; width: 100%">' + v + '</span>';}  
    }

var TDCurrentDay = new Ext.ux.tree.TreeGrid({
            title: currentday,
            requestMethod : 'GET',
        margins: '5 5 0 5',
        height: 400,
        collapsible:false,
        region:'center',
        autowidth: false,
        headersDisabled: true,
        viewConfig:{forceFit:true},
        tbar: {
            xtype: 'toolbar',
            items: [
                {xtype: 'button',text: 'Expand All', icon:'../images/expand-all.gif',
                    handler: function(){
                        TDCurrentDay.expandAll();
                    }
                },
                {xtype: 'spacer',width:5},
                {xtype: 'button',text: 'Collapse All', icon:'../images/collapse-all.gif',
                    handler: function(){
                        TDCurrentDay.collapseAll();
                    }
                }
            ]
        },
        enableDD: false,
        columns:[
            {header: 'Unit',dataIndex: 'unit', width: 210},

            {header: 'H1', width: 60, dataIndex: 'duration1', align: 'center',              
                tpl: new Ext.XTemplate('{duration1:this.doFormat}', {
                    doFormat: fn     
                })
            },

            {header: 'A1', width: 0,dataIndex: 'alarm1', visibility: false},

            {header: 'H2', width: 60, dataIndex: 'duration2', align: 'center',
                    tpl: new Ext.XTemplate('{duration2:this.doFormat}', {
                        doFormat: fn     
                            })
            },

            {header: 'A2', width: 0,dataIndex: 'alarm2', visibility: false},


            {header: 'H3', width: 60, dataIndex: 'duration3', align: 'center',
                    tpl: new Ext.XTemplate('{duration3:this.doFormat}', {
                        doFormat: fn     
                            })
            },

            {header: 'A3', width: 0,dataIndex: 'alarm3', visibility: false}

        ],

            dataUrl: 'treegrid-data.json'
});

score 1 · Accepted Answer · answered Apr 06 '11 at 23:39

With some great help from Sencha Support, fixed the issue by removing the treegrid.css file which for some reason was causing the column alignment issue and added the below code for the cell borders:

.x-treegrid-col {
    border: 1px solid #efefef;
}

score 0 · Answer 2 · answered Mar 17 '11 at 02:37

0

Are you talking about the alignment of the items within the grids?

Removing align: 'center' from your column definitions should make them left align. You might prefer align: 'right'.

answered Mar 17 '11 at 02:37

wombleton

8,336
1
28
30

Unfortunately no, I'm talking about the alignment of the actual grid cells. If you look at the screenshot, they're all staggered and don't form a straight column (e.g. like in Excel). Thanks though. – Casey Mar 17 '11 at 03:45

score 0 · Answer 3 · answered Mar 17 '11 at 05:03

0

I guess you are talking about the tree structure being indented? Obviously that exists to show containment, and if there were no staggering, it would be hard to see what nodes are under what other nodes.

But if that is actually what you want, you can hide the indent by giving your TreeGrid a CSS class, and adding this to you CSS file:

<style type="text/css">
    .my-tree-grid-class .x-tree-node-indent { display: none; }
</style>

answered Mar 17 '11 at 05:03

Sean Adkinson

8,425
3
45
64

Sean, no, I'm not talking about the first column which displays the actual tree structure but rather the data columns to the right. If you look at the screenshot closely, you can see that the cells under the columns are not aligned exactly; it's most apparent if you look at column H11. Sorry if my description suggested I was talking about the tree structure. – Casey Mar 17 '11 at 06:12
I'd have to use firebug to try to determine what is wrong. Can you post this table somewhere where I can take a look? – Sean Adkinson Mar 29 '11 at 04:13

How to align treegrid columns

3 Answers3