ComboBox zeigt displayField nur an, wenn es angeklickt wird

Question

Ich habe ein EditorGridPanel, das ich über ein Ext.Window.

resources sind die Json-Daten, die ich über einen Ajax-Aufruf erhalte.

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

Das Problem ist, dass das displayField der ComboBox nur angezeigt wird, wenn ich auf die ComboBox klicke. Wenn ich darauf klicke, erhalte ich die Auswahlmöglichkeiten: "erlaubt", "nicht erlaubt". Wenn ich den Fokus entferne, werden die Werte angezeigt: "1", "0".

Wie kann ich die displayField-Werte anzeigen, auch wenn ich nicht geklickt habe?

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();

    }

Editar: Unter Narendra Kamma's Antwort, ich habe meinen Code so bearbeitet:

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

Das funktioniert wunderbar.

Answer 1

Sollten Sie den Anzeigewert selbst rendern. suchen Sie nach Renderer in der Spezifikation der Gitterspalte.

1. Renderer konfigurieren
2. liefert er den ausgewählten Wert und den zugehörigen Datensatz
3. Sie können auf der Grundlage Ihrer Logik einen Anzeigewert zurückgeben (akzeptiert buchstäblich jeden Wert)