Что может привести к тому, что g.getView (). GetRow (0) .style.color = "red" не будет работать в ExtJS Grid? - PullRequest
Новая
       20

Что может привести к тому, что g.getView (). GetRow (0) .style.color = "red" не будет работать в ExtJS Grid?

1 голос
/ 24 января 2011

Мне удалось раскрасить определенные строки сетки ExtJS с помощью кода ниже, который я получил от этого ответа :

enter image description here

Однако в реальном приложении точно такой же код не отображает цвета:

enter image description here

Разница заключается в том, что во втором примере код загружается через AJAX в более крупное приложение, поэтому его сложно отладить с помощью Firebug.

Я уверен, что выполнение попадает внутрь функции viewready , так как я могу поместить туда предупреждение и увидеть, что оно выполняется, но g.getView().getRow(2).style.color='red'; по какой-то причине не выполняется (или сбрасывается по какой-то причине).

Переменная myData такая же во втором примере, как и в первом (не загружается из внешнего источника), приложение просто создает этот код JavaScript с помощью PHP.

Что может быть причиной того, что тестовый пример работает сам по себе, но этот код не работает в более крупном приложении? 

var myData = [
    ['newfile.csv', 'CSV', 15313, '2011-01-24 09:49:55', 'newfile', '2011-01-24 14:40:21', 'auf letztem Stand'],
    ['test333.csv', 'CSV', 15313, '2011-01-24 09:49:56', 'test333', '2011-01-24 14:40:19', 'auf letztem Stand'],
    ['test.xls (sheet1)', 'XLS', 7168, '2011-01-24 09:49:56', 'test__sheet1', '2011-01-24 14:40:23', 'auf letztem Stand'],
    ['test.xls (sheet2)', 'XLS', 7168, '2011-01-24 09:49:56', 'test__sheet2', '2011-01-24 14:40:25', 'auf letztem Stand'],
    ['test.xls (Tabelle3)', 'XLS', 7168, '2011-01-24 09:49:56', 'test__Tabelle3', '2011-01-24 15:35:07', 'auf letztem Stand']
];
var myReader = new Ext.data.ArrayReader({}, [{
        name: 'name',
        type: 'string'
    }, {
        name: 'kind',
        type: 'string'
    }, {
        name: 'file_size',
        type: 'int'
    }, {
        name: 'when_file_copied',
            dateFormat: 'Y-m-d H:i:s',
        type: 'date'
    }, {
        name: 'table_name',
        type: 'string'
    }, {
        name: 'when_table_created',
        type: 'string'
    }, {
        name: 'status',
        type: 'string'
    }]);

var grid = new Ext.grid.GridPanel({
    region: 'center',
    style: 'margin: 10px',
    store: new Ext.data.Store({
        data: myData,
        reader: myReader
    }),
    columns: [{
            header: 'Worksheets zum importieren',
            width: 300,
            sortable: true,
            dataIndex: 'name'
        }, {
            header: 'Typ',
            width: 50,
            sortable: true,
            dataIndex: 'kind'
        }, {
            header: 'Größe (bytes)',
            sortable: true,
            dataIndex: 'file_size'
        }, {
            header: 'Wann Datei kopiert',
            width: 150,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
            dataIndex: 'when_file_copied'
        }, {
            header: 'MySQL Tabellenname',
            width: 300,
            sortable: true,
            dataIndex: 'table_name'
        }, {
            header: 'Wann Tabelle erstellt',
            width: 160,
            sortable: true,
            dataIndex: 'when_table_created'
        }, {
            header: 'Status',
            width: 300,
            sortable: true,
            dataIndex: 'status'
        }],
    viewConfig: {
    },
    title: 'Gültige Dateien (.csv und .xsl/.xslx unter 4MB) in Importverzeichnis (webdev: /data/storage/test/original_excel)',
    width: 1300,
    listeners: {
        'rowdblclick': function(grid_smart_worksheets, index, rec){
            var id = grid_smart_worksheets.getSelectionModel().getSelected().json[0];
            replace_region_with_uri_content('backend/application/importmanager/single', targetRegion, 'id='+id);
        },
        'viewready' : function(g) {
            g.getView().getRow(0).style.color="red";
            g.getView().getRow(2).style.color="#aaa";
        }
    },
    autoHeight: true,
    frame: true
});

Ответ

Приведенный ниже код Gajahlemu работает хорошо, как и в моей демонстрации, но в моем приложении мне пришлось изменить CSS, применяя его к внутреннему TD, чтобы избежать конфликтов с другими стилями, поэтому это работает, например: 

.grid-row-highlight td {
    background-color: yellow;
    color: red;
    font-weight: bold;
}

enter image description here

Ответы [ 2 ]

3 голосов
/ 24 января 2011

Пожалуйста, примите во внимание следующее: ваши данные загружаются удаленно (с помощью ajax) или ваши данные слишком велики из-за возможной задержки во времени между загрузкой данных и их рендерингом, поэтому вызов функции обработчика viewready может быть неудачным 

g.getView().getRow(2)

, поскольку "строка" еще не существует (не определено)

попробуйте использовать решение McStretch гораздо лучше.Вот мой пример, как реализовать это: 

....
viewConfig: {
    getRowClass: function(record, rowIndex, rp, ds){ 
        if(rowIndex == 2){
            return 'red-row';
        } else {
           return '';
        }
    }
},
title: 'Gültige Dateien (.csv und .xsl/.xslx unter 4MB) in Importverzeichnis (webdev: /data/storage/test/original_excel)',
width: 1300,
listeners: {
    'rowdblclick': function(grid_smart_worksheets, index, rec){
        var id = grid_smart_worksheets.getSelectionModel().getSelected().json[0];
        replace_region_with_uri_content('backend/application/importmanager/single', targetRegion, 'id='+id);
    },
},
....

PS: Не забудьте объявить класс "red-row" в вашем файле CSS или между тегом <style>, т.е. 

.red-row {
    color: red;
}
0 голосов
/ 24 января 2011

Добавьте событие после того, как магазин загрузит ваши данные ('dataloaded'), сетка ответит на это, изменив цвета, как сейчас с 'viewready'

...