Как выровнять триггерные столбцы - PullRequest
Новая
       14

Как выровнять триггерные столбцы

0 голосов
/ 16 марта 2011

Несмотря на то, что каждый из моих столбцов установлен на фиксированную ширину в пикселях, мои столбцы на сетке дерева расположены повсюду (т.е. не выровнены по прямой линии).Пожалуйста, смотрите снимок экрана , который иллюстрирует проблему.Также ниже приведен обзор кода для древовидной сетки.Есть идеи, как решить эту проблему?

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

Ответы [ 3 ]

1 голос
/ 07 апреля 2011

С помощью службы поддержки Sencha мы исправили проблему, удалив файл treegrid.css, который по какой-то причине вызывал проблему с выравниванием столбцов, и добавили следующий код для границ ячейки: 

.x-treegrid-col {
    border: 1px solid #efefef;
}
0 голосов
/ 17 марта 2011

Полагаю, вы говорите о древовидной структуре с отступом? Очевидно, что существует, чтобы показать сдерживание, и если бы не было никакого колебания, было бы трудно увидеть, какие узлы находятся под какими другими узлами.

Но если это действительно то, что вам нужно, вы можете скрыть отступ, назначив вашему TreeGrid класс CSS и добавив его в свой файл CSS: 

<style type="text/css">
    .my-tree-grid-class .x-tree-node-indent { display: none; }
</style>
0 голосов
/ 17 марта 2011

Вы говорите о выравнивании элементов в сетках?

Удаление align: 'center' из ваших определений столбцов должно привести к их выравниванию по левому краю.Вы можете предпочесть align: 'right'.

...