Extjs编辑器网格中的组合框不会初始显示

Question

我正在尝试使用编辑器网格编辑信息。 我有三个字段，“采访者”（组合），“日期”（日期）和“绩效”（数字），我获得了日期和“绩效”列，但是该组合最初并未显示该值。 但是，当我单击时，它会显示正确的值。 我是extjs的新手，并用谷歌搜索解决方案，但找不到它。 请帮我解决。 提前致谢。

我的代码：

initComponent: function() {
    this.createTbar(); 
    this.columns = [
        { xtype:'numbercolumn', 
          hidden:true,
          dataIndex:'interview_id', 
          hideable:false
        },
        {   xtype: 'gridcolumn',
            dataIndex: 'interview_by_employee_id',
            header: 'Interview By',
            sortable: true,
            width: 290,
            editor: {
                xtype: 'combo',
                store: employee_store,
                displayField:'employee_first_name',
                valueField: 'employee_id',
                hiddenName: 'employee_first_name',
                hiddenValue: 'employee_id',
                mode: 'remote',
                triggerAction: 'all',
                forceSelection: true,
                allowBlank: false ,
                editable: false,
                listClass : 'x-combo-list-small',
                style: 'font:normal 11px tahoma, arial, helvetica, sans-serif'


        },
        renderer: function(val){
            index = employee_store.findExact('employee_id',val); 
            if (index != -1){
                rs = employee_store.getAt(index).data; 
                return rs.employee_first_name; 
            }
        }

        },
        {   xtype: 'gridcolumn',
            dataIndex: 'interview_date',
            header: 'Date',
            sortable: true,
            readOnly: true,
            width: 100,
            editor: {
                xtype: 'datefield'
            }
        },
        {   xtype: 'numbercolumn',
            header: 'Performance',
            format:'0',
            sortable: true,
            width: 100,
            align: 'right',
            dataIndex: 'interview_performance',
            editor: {
                xtype: 'numberfield'
            }
        }
    ];
    candidate_grid_interview.superclass.initComponent.call(this);
}

和屏幕截图，

Answer 1

我遇到了同样的问题，并在某个地方找到了解决方案。 这是我正在使用的简化版本。 我认为关键是列上的renderer属性。 如果您的组合使用远程数据，则可能在网格加载完成后加载其内容 - 但我不确定它是否会导致您描述的问题。

试试这个概念：

var myStore = new Ext.data.JsonStore({
    autoLoad: false,
    ...            
    fields: [
        { name: 'myID', type: 'int' },
        { name: 'myName', type: 'string' }
    ],
    listeners: {
        load: function () {
            // Load my grid data.
        },
        scope: this
    }
});

var myCombo = new Ext.form.ComboBox({
    ...
    displayField: 'myName',            
    valueField: 'myID',
    store: myStore
});

var grid = new Ext.grid.EditorGridPanel({
    store: new Ext.data.ArrayStore({
        ...
        fields: [                
            ...
            { name: 'myID', type: 'int' },
            ...                   
        ]
    }),
    ...
    cm: new Ext.grid.ColumnModel({
        columns: [
        ...
        {                
            header: 'Header',
            dataIndex: 'myID',                        
            editor: myCombo,                    
            renderer: function (value) {
                var record = myCombo.findRecord(myCombo.valueField, value);
                return record ? record.get(myCombo.displayField) : myCombo.valueNotFoundText;
            }
        }]
    })            
});

myStore.load();

Answer 2

存储加载是异步的，因此在渲染网格后可能会加载自身。 我建议你在store onload事件中渲染你的网格。 另外，如果您没有引起足够的重视，数据类型可能会很痛苦。 确保您的网格存储和组合商店类型匹配。