트리 그리드 열 정렬 방법

Question

각 열이 고정 픽셀 너비로 설정되어 있어도 트리 그리드 열이 모든 위치에 있습니다 (즉, 직선으로 정렬되지 않음). 문제를 설명하는 screenshot을 참조하십시오. 또한, 아래는 트리 그리드의 코드 개요입니다. 이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

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

:

하지만 그건 당신이 원하는 실제로, 당신은 CSS 클래스 당신 TreeGrid에를주고, 당신이를 추가하여 들여 쓰기를 숨길 수

파일을 CSS 어떤 이유로 treegrid.css 파일 어떤을 제거하여 문제는 열 정렬 문제의 원인과 셀 테두리의 아래 코드 추가되었습니다

불행하게도

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

Answer 2

그리드 내의 항목 정렬에 대해 이야기하고 있습니까?

열 정의에서 align: 'center'을 제거하면 왼쪽으로 정렬해야합니다. align: 'right'을 선호 할 수도 있습니다.

Answer 3

트리 구조가 들여 쓰기로되어있는 것 같습니까? 당연히 봉쇄를 보여주는 것이 존재하며, 비틀 거리지 않는 경우 다른 노드 아래에 어떤 노드가 있는지 확인할 수 없습니다. 고정 센차 지원, 일부 큰 도움

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