Question

我在我的应用程序中使用ExtJs，并且我有一个具有唯一列的网格。这个专栏有一个编辑器，它是一个组合框，所以当我点击一个网格单元时，会显示一个组合框。但是，当我单击编辑网格单元格值时，我的对象名称是可见的，但是当我在单元格外部单击时，在我的网格中呈现的值是对象的id。

当我选择项目时：

enter image description here

当我在组合框外面点击时：

enter image description here

我的代码：

Ext.define('ComboBoxDoenca', {
extend : 'Ext.form.ComboBox',
displayField: 'nome',
editable: false,
width: 300,
valueField: 'id',
listeners:{
    render: function(combo){
        combo.store = Ext.create('ComboStore').load();
    }
}

}）;

网格代码：

Ext.define('GridDoenca', {
extend : 'Ext.grid.Panel',
title: 'Doenças',
alias : 'widget.doencaList',
id: 'gridDoenca',
height: 150,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
})],
initComponent : function() {
    var comboDoenca = Ext.create('Hemisphere.view.fungicida.ComboBoxDoenca');
    me = this;
    Ext.apply(this, {
        dockedItems : [ {
            xtype : 'toolbar',
            dock : 'top',
            items : [ {
                text : 'Add Doença',
                icon : Webapp.icon('add1.png'),
                iconAlign : 'top',
                action : 'addDoenca'
            }]
        } ]
    });

    this.columns = [ {
        header : 'ID',
        dataIndex : 'id',
        hidden: true
    },{
        header : 'Doença',
        dataIndex : 'id',
        editor: comboDoenca,
        flex: 1
    }];
    this.callParent(arguments);
}

}）;

任何人都可以帮助我？

Answer 1

好吧，网格列显示分配给它的实际值。这意味着在内部，数据已完美分配。

您遇到的问题是您不希望看到ID值，而是更友好的表示。这可以通过渲染器功能来解决。

请在这里查看我的示例：http://jsfiddle.net/lontivero/aP4Kg/

我已将数据存储定义如下：

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data: [
        {"name":"1", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"2", "email":"bart@simpsons.com", "phone":"555-222-1234"},
        {"name":"3", "email":"home@simpsons.com", "phone":"555-222-1244"},
        {"name":"4", "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]
});

这是我的组合框的名称商店：

var names = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data : [
        {"id":"1", "name":"Bart"},
        {"id":"2", "name":"Homer"},
        {"id":"3", "name":"Marge"},
        {"id":"4", "name":"Lisa"}
    ]
});

正如你在第一家商店看到的那样，“name”字段包含一个id，当然，我不想看到这些数字，我想看看Bart，Homer，Marge或Lisa。

然后，在渲染器函数中，我将名称中的id转换为显示它们。

renderer: function(value) {
    var idx = names.find('id', value)
    var rec = names.getAt(idx);
    return rec.get('name');                    
}

我希望这是你正在寻找的。

网格单元格呈现错误

1 个答案: