Ext JS на rowdblclick изменить цвет фона строки, по которой щелкнули - PullRequest
Новая
       22

Ext JS на rowdblclick изменить цвет фона строки, по которой щелкнули

2 голосов
/ 10 апреля 2011

Hello
Я новичок в Ext JS и создал следующие поля сетки: 

columns: [
{
    header   : 'Firs name',
    width    : 200,
    sortable : true,
    dataIndex: 'firstName'
},
{
    header   : 'Last name',
    width    : 200,
    sortable : true,
    dataIndex: 'lastName'
},
{
    header   : 'Favourite color',
    width    : 195,
    sortable : true,
    dataIndex: 'favouriteColor'
}

],

Значения будут сгенерированы в php.
Я должен сделать так, чтобы когда пользователь doubleCllick в любой строке, цвет фона этой строки превращался в любимый цвет пользователя (красный, синий, желтый). Пока я это сделал 

  grid.on('rowdblclick', function(grid,index,e) {
    alert(index);
  });

... Я получил индекс строки, по которой щелкнули, но я не знаю, как изменить цвет фона. Буду признателен за любую помощь.

1 Ответ

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

Вам необходимо использовать объект GridView, чтобы получить DOM выбранной строки. И примените CSS с вашим любимым цветом в этом ряду. Для начала вам нужно создать несколько CSS-классов: 

.redrow {
  background-color: red !important;
}

Аналогично для синего и желтого. Далее вам нужно получить строку и добавить в нее класс CSS. 

grid.on('rowdblclick', function(grid,index,e) {
    var color = grid.getStore().getAt(index).get('favouriteColor');

    if(color == 'red')
       Ext.fly(grid.getView().getRow(index)).addClass('redrow');
    else if( color == 'blue')
       Ext.fly(grid.getView().getRow(index)).addClass('bluerow');
    .
    .
    .
});

Если вы пытаетесь изменить цвет фона строки в соответствии со столбцом favouriteColor, вам нужно использовать другую технику. Вы можете использовать ViewConfig и реализовать метод getRowClass, как показано ниже: 

viewConfig: {
    forceFit: true,
    getRowClass: function(record, index,prarms,store) {
        var color = record.get('favouriteColor');
        if(color == 'red')
            return 'redrow';
        else if(color == 'blue')
            return 'bluerow';
        else if (color == 'yellow')
            return 'yellowrow';
        else
            return;         
    }
}

ViewConfig используется вместе с объявлением сетки. Вы не используете возвращаемое значение getRowClass. Каркас использует возвращаемое значение. Вам нужно только написать логику для выбора правильного класса CSS для строки. Метод getRowClass можно использовать, если вам необходимо отобразить цвета фона при визуализации сетки. Его нельзя использовать во время пользовательских событий или после рендеринга сетки.

В вашем случае вам не нужен этот метод, потому что вы меняете цвет строки, когда пользователь дважды щелкает строку, верно? Таким образом, вы можете обратиться к первой части для ответа, где вы изменяете фон строки в соответствии со значением favouriteColor для этой строки.

...