ComboBox only shows displayField when clicked

I have an EditorGridPanel which I show via a Ext.Window.

resourcesis the Json-data I get via an Ajax-call.

Example data: {"data":[{"id":"1","allowed":"1","roleId":"0","resource":"nothing"}]}

The problem is that the displayField of the ComboBox is only shown when I click on the ComboBox. When clicked, I get the choices: "allowed", "not allowed". When I remove focus the values get shown: "1", "0".

How can I show the displayField-values even when I have not clicked?

showRoleDetails: function(resources, roleId) {
        var rolesData = resources;

        var store = new Ext.data.JsonStore({
            url: '/plugin/Registration/admin/get-acl-resources-of-role',
            baseParams: { role: roleId},
            storeId: 'myStore',
            root: 'data',

            fields: [   
                        {name: 'allowed'},
                        {name: 'resource'}
                       ]
          });

        store.load();

        var grid = new Ext.grid.EditorGridPanel({
            title: "Edit / View permissions for resources",
            store: store,
            autoHeight: true,
            columns: [

                        {
                            header: 'Allowed',
                            dataIndex: 'allowed',
                            editor: new Ext.form.ComboBox({
                                triggerAction: 'all',
                                frame: true,
                                lazyRender:true,
                                editable: false,
                                mode: 'local',
                                value: 'allowed',
                                store: new Ext.data.JsonStore({
                                      fields : ['allowed', 'allowedLabel'],
                                      data   :
                                            [
                                                 {
                                                     allowed: '1',
                                                     allowedLabel: 'allowed'
                                                 },
                                                 {
                                                     allowed: '0',
                                                     allowedLabel: 'not allowed'
                                                 }
                                             ]
                                }),
                                valueField: 'allowed',
                                displayField: 'allowedLabel'
                           })   
                        },
       开发者_运维问答                 {
                            header: 'Resource',
                            dataIndex: 'resource'
                        }
                      ]
        });

        var window = new Ext.Window({
            items: grid
        });
        window.show();

    }

Edit: Following Narendra Kamma's response, I edited my code as such:

var comboBox = new Ext.form.ComboBox({ //Combox values need to be filled up
        triggerAction: 'all',
        frame: true,
        lazyRender:true,
        editable: false,
        mode: 'local',
        value: 'allowed',
        store: new Ext.data.JsonStore({
              fields : ['allowed', 'allowedLabel'],
              data   :
                    [
                         {
                             allowed: '1',
                             allowedLabel: 'allowed'
                         },
                         {
                             allowed: '0',
                             allowedLabel: 'not allowed'
                         }
                     ]
        }),
        valueField: 'allowed',
        displayField: 'allowedLabel'
    })  ;

    var me = this;

    var grid = new Ext.grid.EditorGridPanel({
        title: "Edit / View permissions for resources",
        store: store,
        autoHeight: true,
        columns: [

                    {
                        header: 'Allowed',
                        dataIndex: 'allowed',
                        editor:  comboBox,
                        renderer: me.comboBoxRenderer(comboBox)
                    },
                    {
                        header: 'Resource',
                        dataIndex: 'resource'
                    }
                  ]
    });

This works wonderfully.

you should render the display value yourself. look for renderer option in grid column spec.

1. configure renderer
2. it will supply selected value, and related store record
3. you can return display value basing on your logic (accepts any value literally)