如何在网格面板的列编辑器中以不同的方式呈现文本(ExtJs6.0.2)

Ext.define('CustomTextEditor', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.customtexteditor',

    // 自定义渲染方法
    render: function() {
        this.callParent(arguments);
        // 添加自定义样式或事件处理
        this.addCls('custom-text-editor');
    },

    // 自定义值处理
    getValue: function() {
        return this.callParent(arguments).toUpperCase(); // 示例：将文本转换为大写
    },

    // 自定义值设置
    setValue: function(value) {
        this.callParent(arguments);
        this.updateValue(value); // 示例：更新显示值
    },

    updateValue: function(value) {
        this.setRawValue(value.toLowerCase()); // 示例：将显示值转换为小写
    }
});

// 创建网格面板
Ext.create('Ext.grid.Panel', {
    title: 'Custom Column Editor Example',
    store: Ext.create('Ext.data.Store', {
        fields: ['name', 'email'],
        data: [
            { name: 'John Doe', email: 'john@example.com' },
            { name: 'Jane Smith', email: 'jane@example.com' }
        ]
    }),
    columns: [
        { text: 'Name', dataIndex: 'name', editor: { xtype: 'customtexteditor' } },
        { text: 'Email', dataIndex: 'email', editor: 'textfield' }
    ],
    renderTo: Ext.getBody()
});