Question

So I thought formatting the borders within an extjs treegrid would be basic but I have not been able to find a solution after hours of trying and looking around. The problem I’m having is that my borders appearance and width are inconsistent between both columns and rows (tried attaching screenshot but couldn’t since new to site). I tried defining borders directly in the column creation:

columns:[{header: 'H6',dataIndex: 'hour6',width: 210, border: 1}]

as well as in the XTemplate where I’m setting my cell background color (didn’t think this would work but thought I’d try):

columns: [{header: 'H6',dataIndex: 'hour6',width: 210,              
    tpl: new Ext.XTemplate('{duration1:this.doFormat}', {
        doFormat: fn(v){
            if (v == 1) {return '<span style="background-color: red; width: 100%; border: 1">' + v + '</span>';}
        else {return '<span style="background-color:' + currentcolor + '; width: 100%; border: 1">' + v + '</span>';}
        }
    })
}]

Does anyone know how to format treegrid borders to fix this issue?

Thanks.

Answer 1

Your best bet us to use css classes through the cls config option of your column definition or manipulate the css style directly on the column element. The border between grid rows is set on the .x-treegrid-col class.

// set the border on all rows to red
.x-treegrid-col {
    border-bottom: 1px solid red;
}

I’m not entirely sure what you are trying to achieve though, upload a screenshot to http://tinypic.com/ and embed of link to it in your original post, that might help.