0

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

当我选择项目时：

在此处输入图像描述

当我在组合框外单击时：

在此处输入图像描述

我的代码：

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

});

任何人都可以帮助我吗？

4

1 回答 1

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

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

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

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

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

于 2012-12-21T15:33:21.763 回答