Как изменить цвет текста только одной строки в сетке ExtJS? - PullRequest
Новая
       36

Как изменить цвет текста только одной строки в сетке ExtJS?

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

Я создал следующую сетку ExtJS.

Я хочу изменить цвет текста всех ячеек в строке second .

Однако я могу только узнать, как изменить цвет всех ячеек в всех строк, включая текст заголовка, как показано здесь: 

var myData = [
    [4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, 3.0, '2010-11-17 08:31:12'],
    [16, 'Computer2-this row should be red', 0.28, 2.7, '2010-11-14 08:31:12'],
    [5, 'Network1', 0.02, 2.5, '2010-11-12 08:31:12'],
    [1, 'Network2', 0.01, 4.1, '2010-11-11 08:31:12'],
    [12, 'Other', 0.42, 5.0, '2010-11-04 08:31:12']
];

var myReader = new Ext.data.ArrayReader({}, [{
        name: 'id',
        type: 'int'
    }, {
        name: 'object',
        type: 'object'
    }, {
        name: 'status',
        type: 'float'
    }, {
        name: 'rank',
        type: 'float'
    }, {
        name: 'lastChange',
        type: 'date',
        dateFormat: 'Y-m-d H:i:s'
    }]);

var grid = new Ext.grid.GridPanel({
    region: 'center',
    style: 'color:red', //makes ALL text in grid red, I only want one row to be red
    store: new Ext.data.Store({
        data: myData,
        reader: myReader
    }),
    columns: [{
            header: 'ID',
            width: 50,
            sortable: true,
            dataIndex: 'id',

            hidden: false

        }, {
            header: 'Object',
            width: 120,
            sortable: true,
            dataIndex: 'object',
            renderer: columnWrap

        }, {
            header: 'Status',
            width: 90,
            sortable: true,
            dataIndex: 'status'
        }, {
            header: 'Rank',
            width: 90,
            sortable: true,
            dataIndex: 'rank'
        }, {
            header: 'Last Updated',
            width: 120,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
            dataIndex: 'lastChange'
        }],
    viewConfig: {
        forceFit: true
    },
    title: 'Computer Information',
    width: 500,
    autoHeight: true,
    frame: true,
    listeners: {
        'rowdblclick': function(grid, index, rec){
            var id = grid.getSelectionModel().getSelected().json[0];
            go_to_page('edit_item', 'id=' + id);
        }
    }
});

Что мне нужно сделать, чтобы изменить цвет текста только для ячеек во втором ряду?

Ответы [ 2 ]

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

Вы хотите переопределить getRowClass, который передается в GridPanel's viewConfig.Пример приведен в документации API GridPanel: 

   viewConfig: {
        forceFit: true,

   //   Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },

GridView содержит метод, поэтому обратитесь к API для получения дополнительной информации: 

getRowClass( Record record, Number index, Object rowParams, Store store )

Переопределите эту функциюприменять пользовательские классы CSS к строкам во время рендеринга.Вы также можете предоставить пользовательские параметры в шаблон строки для текущей строки, чтобы настроить способ ее отображения с помощью параметра rowParams.Эта функция должна возвращать имя класса CSS (или пустую строку '' для none), которое будет добавлено в div для переноса строки.Чтобы применить несколько имен классов, просто верните их через пробел в строке (например, «мой класс другой класс»).

Вы можете применить CSS к определенной строке, используя index аргумент.

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

не уверен, поможет ли это, но вы можете попробовать.Я пытался локально, он меняет цвет всех символов во 2-й строке.

Добавить слушателя в сетку: 

listeners:{
    viewready: function(g){
        g.getView().getRow(1).style.color="#f30";
    }
}

"Когда viewready, вы можете получить div строкииспользуя getRow() метод из GridView. После этого нормальный Javascript назначения цветов (или добавления дополнительного класса, если хотите)

Приветствия

РЕДАКТИРОВАНИЕ

Я понимаю, что это не работает, если ваш магазин извлекает данные удаленно. Просмотр готов, но данные не готовы. Этот метод завершится ошибкой.

...