如何对齐树形网格列

Question

尽管我的每一列都设置为固定的像素宽度，但我的树形网格列到处都是（即没有沿直线对齐）。请参阅说明问题的屏幕截图。另外，下面是树形网格代码的概述。关于如何解决这个问题有什么想法吗？

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'
});

Answer 1

在 Sencha 支持的大力帮助下，通过删除由于某种原因导致列对齐问题的 treegrid.css 文件解决了该问题，并为单元格边框添加了以下代码：

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

Answer 2

您是在谈论网格内项目的对齐方式吗？

从列定义中删除 align: 'center' 应该会使它们左对齐。您可能更喜欢 align: 'right'。

Answer 3

我猜你是在谈论缩进的树结构？显然，它的存在是为了显示遏制，如果没有令人震惊的情况，就很难看出哪些节点位于哪些其他节点之下。

但如果这确实是您想要的，您可以通过为 TreeGrid 提供一个 CSS 类并将其添加到您的 CSS 文件中来隐藏缩进：

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