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

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

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'
                }
            }]
});

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

введите здесь описание изображения

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

введите здесь описание изображения

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

В моем примере значение столбца равно ABCDE, поэтому значение редактора также будет ABCDE.

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


javascript user-interface extjs extjs6-classic
person DockYard    schedule 03.07.2019    source источник
comment
При закрытии редактора вам нужно, чтобы ваше действие было отменено? например Все Z, чтобы снова стать As   -  person ground_call    schedule 04.07.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это, установив значение в событии 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< /а>.

person norbeq    schedule 03.07.2019
comment
Это работает очень хорошо. Но не могли бы вы также сказать мне, как сделать обратное. то есть то, что когда-либо пользователь помещает в редактор, я хочу, чтобы другое значение отражалось в значении столбца сетки. Ваша помощь будет очень признательна - person DockYard; 04.07.2019
comment
А также ваше решение будет применено ко всем столбцам сетки. Что, если я хочу, чтобы этот слушатель применялся только к некоторым из многих столбцов сетки? - person DockYard; 04.07.2019