В ExtJS, как добавить пользовательский класс CSS в строки сетки данных?

Question

Как добавить пользовательские классы CSS в строки в сетке данных (Ext.grid.Panel)?

Я использую ExtJS 4.0.

Answer 1

Способ сделать это - определить viewConfig в сетке:

Ext.create('Ext.grid.Panel', {
    ...

    viewConfig: {
        getRowClass: function(record, index, rowParams, store) {
            return record.get('someattr') === 'somevalue') ? 'someclass' : '';
        }
    },

    ...
});

Answer 2

В вашем initComponent() из Ext.grid.Panel используйте getRowClass() следующим образом:

    initComponent: function(){
        var me = this;
        me.callParent(arguments);
        me.getView().getRowClass = function(record, rowIndex, rowParams, store) {
            if (/* some check here based on the input */) {
                return 'myRowClass';
            }
        };
    }

Это в основном переопределяет функцию getRowClass() базового Ext.grid.View, которая вызывается во время рендеринга дляприменять любые пользовательские классы.Тогда ваш пользовательский файл CSS будет содержать что-то вроде:

.myRowClass .x-grid-cell {background:#FF0000; } 

Answer 3

Вы можете сделать что-то вроде этого:

Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');

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

И затем вы можете стилизовать это в дополнение к CSS по умолчанию, выполнив:

.x-grid3-row-selected .myClass {
   background-color: blue !important;
}

Существует также частный метод GridView, называемый addRowClass.Вы также можете использовать это, чтобы добавить класс в ваши строки, выполнив:

grid.getView().addRowClass(rowId, 'myClass');

// private - use getRowClass to apply custom row classes
addRowClass : function(rowId, cls) {
    var row = this.getRow(rowId);
    if (row) {
        this.fly(row).addClass(cls);
    }
},

Answer 4

Если вы хотите изменить класс после загрузки данных, вы можете сделать это следующим образом:

myGridPanel.getView().removeRowCls(rowIndex,"old class");
myGridPanel.getView().addRowCls(rowIndex,"new class");

Здесь rowIndex - это выбранная строка, которую вы можете получить в некоторых функциях события (например, «выбрать»). Используя это, вы можете изменить CSS строки после нажатия на нее.

Answer 5

Используйте самый простой способ

В вашей сетке используйте -

cls: 'myRowClass'

Ваш CSS -

.myRowClass .x-grid-ячейка {фон: # FF0000! важный;}