ComboBox показывает только displayField при нажатии - PullRequest
Новая
       28

ComboBox показывает только displayField при нажатии

3 голосов
/ 17 марта 2011

У меня есть EditorGridPanel, который я показываю через Ext.Window.

resources - это данные Json, которые я получаю с помощью Ajax-вызова.

Пример данных: {"data":[{"id":"1","allowed":"1","roleId":"0","resource":"nothing"}]}

Проблема в том, что displayField ComboBox отображается только при нажатии на ComboBox.При нажатии я получаю выбор: «разрешено», «не разрешено».Когда я убираю фокус, отображаются значения: «1», «0».

Как показать значения displayField, даже если я не нажал? 

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

    }

Редактировать: После ответа Нарендры Каммы я отредактировал свой код так: 

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

Это прекрасно работает.

1 Ответ

4 голосов
/ 17 марта 2011

Вы должны визуализировать отображаемое значение самостоятельно. ищите опцию renderer в спецификации столбца сетки.

  1. настроить рендерер
  2. будет выдано выбранное значение и соответствующая запись магазина
  3. вы можете вернуть отображаемое значение на основе вашей логики (принимает любое значение буквально)
...