combobox in propertygrid using Extjs-6

Question

I'm Using Extjs-6. I have propertygrid. One of this propertygrid'row is a combobox. valueFiled property of combobox is id and displayfield is name. When I want to edit the combobox in propertygrid it show the names, but when the propertygrid is not in edit mode, it show the id. I want to show in 2 modes name value, and its value be id. My sampleCode is here.

Is it possible? How Can I Do it?

Answer 1

As @CD mentioned, you should use renderer:

Ext.define('Fiddle.Main', {
extend: 'Ext.panel.Panel',
width: 400,
height: 200,
title: 'Its me!',
items: [{
    xtype: 'propertygrid',
    width: 400,
    layout: 'fit',
    source: {
        ali: 3
    },
    sourceConfig: {
        ali: {
            displayName: 'ali',
            editor: {
                xtype: 'combobox',
                store: store,
                displayField: 'name',
                valueField: 'id'
            },
            renderer: function(v){
                return store.findRecord("id", v).get("name");
            }
        }
    }
}]
});