如何对齐treegrid列答案

【问题标题】：How to align treegrid columns如何对齐treegrid列
【发布时间】：2011-04-07 07:39:12
【问题描述】：

即使我的每一列都设置为固定的像素宽度，但我的 treegrid 列到处都是（即不对齐在一条直线上）。请参阅说明问题的screenshot。此外，下面是 treegrid 代码的概述。有关如何解决此问题的任何想法？

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

【问题讨论】：

标签： extjs treegrid

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

很遗憾，我说的是实际网格单元格的对齐方式。如果您查看屏幕截图，它们都是交错的，并且不会形成一个直列（例如在 Excel 中）。不过还是谢谢。

【解决方案3】：

我猜你说的是缩进的树结构？显然存在是为了显示包容，如果没有交错，就很难看出哪些节点在哪些其他节点之下。

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

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

【讨论】：

肖恩，不，我说的不是显示实际树结构的第一列，而是右侧的数据列。如果你仔细看截图，你会发现列下的单元格没有完全对齐；如果您查看 H11 列，则最明显。抱歉，如果我的描述表明我在谈论树结构。
我必须使用 firebug 来尝试确定问题所在。你能把这张表贴在我可以看的地方吗？