0

アプリケーションでExtJを使用していますが、一意の列を持つグリッドがあります。この列にはコンボボックスであるエディターがあるため、グリッドセルをクリックすると、1つのコンボボックスが表示されます。ただし、クリックしてグリッドセルの値を編集すると、オブジェクトの名前が表示されますが、セルの外側をクリックすると、グリッドにレンダリングされる値はオブジェクトの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が含まれていますが、もちろん、これらの番号は表示したくありません。バート、ホーマー、マージ、またはリサを表示したいと思います。

次に、レンダラー関数で、これらの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 に答える