Как по-разному отрисовать текст в редакторе колонки панели сетки (ExtJs6.0.2) - PullRequest
Новая
       38

Как по-разному отрисовать текст в редакторе колонки панели сетки (ExtJs6.0.2)

1 голос
/ 03 июля 2019

У меня есть сетка со столбцом, редактор которого настроен как текстовое поле. 

var grid = Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            itemId: 'gridPanel123',
            store: store,
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                editor: {
                    xtype: 'textfield'
                }
            }]
});

Скажем, столбец выглядит примерно так:

enter image description here

Очевидно, что значение столбца - ABCDE. Теперь, когда пользователь нажимает на столбец, в режиме редактора появляется что-то вроде этого:

* +1012 *enter image description here

Теперь мой вопрос: существует ли какой-либо вид средства визуализации, который изменял бы содержимое редактора в зависимости от значения столбца.

Учитывая мой пример, значением столбца является «ABCDE», поэтому значение редактора также приходит как «ABCDE».

Но что, если я захочу заменить все «A» в столбце на «Z» в редакторе. Так что значение редактора для меня должно было быть «ZBCDE». Как это возможно в extjs?

1 Ответ

1 голос
/ 04 июля 2019

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

cellediting: {
     listeners: {
          beforeEdit: function (editor, context) {
               context.value = context.value.replace("A", "Z");
          }
     }
}

Чтобы определить, какой столбец следует заменить, просто добавьте флажок: 

if(context.column.dataIndex == 'name'){
    context.value = context.value.replace("A", "Z");
}

Кпопытка обратной замены: 

validateEdit: function (editor, context){
    context.record.set('name', context.value.replace("Z", "A"));
    context.record.commit();
}

Пример на скрипке: https://fiddle.sencha.com/#view/editor&fiddle/2thq.

...