1

各列が固定ピクセル幅に設定されていても、ツリーグリッドの列はいたるところにあります（つまり、直線に整列していません）。問題を説明するスクリーンショットを参照してください。また、以下はツリーグリッドのコードの概要です。この問題を修正する方法について何かアイデアはありますか？

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

3 に答える 3

1

Sencha Supportの多大な支援を受けて、何らかの理由で列の配置の問題を引き起こしていたtreegrid.cssファイルを削除して問題を修正し、セルの境界線に次のコードを追加しました。

.x-treegrid-col {
    border: 1px solid #efefef;
}
于 2011-04-06T23:39:12.867 に答える
0

インデントされている木の構造について話していると思いますか？明らかにそれは封じ込めを示すために存在し、よろめきがなければ、どのノードが他のどのノードの下にあるかを確認するのは難しいでしょう。

しかし、それが実際に必要な場合は、TreeGridにCSSクラスを指定し、これをCSSファイルに追加することでインデントを非表示にできます。

<style type="text/css">
    .my-tree-grid-class .x-tree-node-indent { display: none; }
</style>
于 2011-03-17T05:03:05.770 に答える
0

グリッド内のアイテムの配置について話しているのですか？

列定義から削除align: 'center'すると、列定義が左揃えになります。あなたは好むかもしれませんalign: 'right'。

于 2011-03-17T02:37:58.440 に答える