如何對齊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列

回答

相關問題