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

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

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

7
datagrid extjs extjs4 javascript

5 ответов

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

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

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

    ...
});
21

в своем 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';
            }
        };
    }

это в основном переопределяет

8

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

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);
    }
},
3

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

при использовании решетки -

cls:'myRowClass'

ваш css -

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

1

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

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

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

1