ExtJS 4 -сетка выбранного цвета ячейки - PullRequest
Новая
       65

ExtJS 4 -сетка выбранного цвета ячейки

0 голосов
/ 15 мая 2018

Я пытаюсь найти ответ на этот вопрос, но не могу.Итак, у меня есть простая сетка с редактированием ячеек плагином (Ext.grid.plugin.CellEditing).Так что в таком случае я вижу выбранную ячейку, отображаемую в «bluebox».

enter image description here

но я не хочу видеть такой выбор, я хочу изменить этот фон.Любое предложение, пожалуйста.

Спасибо, Jadhav , и я вижу вторую проблему в этой сетке.Я хочу редактировать только два столбца:

enter image description here

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

renderer: function(value, meta) {
          meta.style = "background-color:lightgray;";
      }

Этот метод в столбце флажка дает мне следующее:

enter image description here

Почему и как решитьэтот?

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

enter image description here

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Просто вам нужно перезаписать inline css, чтобы вы могли изменить цвет фона, т.е. .., 

.x-grid-row-selected .x-grid-td {
    background: #ffffff;
}
0 голосов
/ 15 мая 2018

Вы можете реализовать использование CSS для выбранной ячейки в CellEditing.

В этом FIDDLE я создал демо, используя плагин CellEditing. Надеюсь, что это поможет / поможет вам выполнить ваши требования.

КОД SNIPPET 

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'demostore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Demo Data',
            store: 'demostore',
            cls:'my-grid',
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                editor: 'textfield'
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                header: 'Phone',
                dataIndex: 'phone'
            }],
            selType: 'cellmodel',
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            height: 200,
            renderTo: Ext.getBody()
        });
    }
});

CSS 

<style>
    .my-grid .x-grid-cell-selected{
        background-color: transparent !important;
    }
</style>

Еще один способ, которым вы также можете воспользоваться, используя событие размытия компонента редактора ячеек. Вам нужно сделать это ниже код 

var selectionModel = grid.getSelectionModel();
selectionModel.deselect(selectionModel.selection.record)
...