如何对齐treegrid列

尽管我的每个列都设置为固定的像素宽度，但我的treegrid列已遍布整个地方（即未按直线对齐）。请参阅screenshot说明问题。另外，下面是treegrid代码的概述。有关如何解决此问题的任何想法？如何对齐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' 
});

来源

2011-03-16 Casey

与煎茶支持，修正了一些很大的帮助通过消除由于某些原因，treegrid.css文件，该文件的问题是导致列对齐问题，并增加了对单元格边框下面的代码：

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

来源

2011-04-06 23:39:12 Casey

你说的是网格内物品的对齐方式吗？

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

来源

2011-03-17 02:37:58 wombleton

可惜没有，我说的是实际的网格单元的排列。如果你看截图，它们都是交错的，不能形成一个直线的列（例如像在Excel中）。不过谢谢。 – Casey 2011-03-17 03:45:55

我想你说的是缩进的树结构？很明显，这表明遏制，如果没有stag，，很难看到哪些节点在其他节点之下。

但如果这实际上是你想要什么，你可以给你的TreeGrid CSS类，并将其加入到你隐藏缩进CSS文件：

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

来源

2011-03-17 05:03:05

肖恩，不，我不是在谈论显示实际树结构的第一列，而是在右边的数据列。如果仔细查看屏幕截图，则可以看到列下的单元格不完全对齐;如果你看一下H11列，这一点最为明显。对不起，如果我的描述建议我在谈论树结构。 – Casey 2011-03-17 06:12:14

我不得不用萤火虫来试图确定什么是错的。你能把这张桌子张贴在哪里我可以看一看吗？ – 2011-03-29 04:13:30

如何对齐treegrid列

回答

相关问题