[RowEditorPlugin and ComboBox] ComboBox doesn't get filled with data

[wojteks27]

Hello everyone,

I'm a JS & ExtJS newbie with a small question.

I'm trying to use RowEditorPlugin on a grid like this:

27935

Columns described as "Slownik" and "Inny" are loaded from remote stores (each column has different store).

My problem is when I try to edit row with RowEditor plugin I get something like this:

27936

I have absolutely no idea why values which are shown in the grid doesn't get loaded into editor field.
If someone would be so kind and explain it to me I'd be very grateful.

Here's the code :

Ext.define('Rekord1', {
extend: 'Ext.data.Model',
fields : [
{name:'src_id',type:'int'},
{name:'src_nazwisko',type:'string'},
{name:'src_imie',type:'string'},
{name:'src_dat',type:'date'},
{name:'src_od',type:'float'},
{name:'src_do',type:'float'},
{name:'src_slw',type:'int'},
{name:'slw_nazwa',type:'string'},
{name:'zzzz',type:'int'},
{name:'zzz_opis',type:'string'}
]
});


Ext.define('myStore1',{
extend : 'Ext.data.Store',
model: 'Rekord1',
pageSize : 20,
autoLoad : false,
proxy: {
type: 'ajax',
url : 'http://localhost/sahip/sahip/pokaz',
reader: {
type: 'json',
root: 'wynik',
totalProperty: 'ilosc'
}
}
});


Ext.define('RekSlw1', {
extend: 'Ext.data.Model',
fields : [
{name: 'slw_id', type: 'int'},
{name: 'slw_nazwa', type: 'string'}
]
});


Ext.define('RekZzz1', {
extend: 'Ext.data.Model',
fields : [
{name: 'zzz_id', type: 'int'},
{name: 'zzz_opis', type: 'string'}
]
});


Ext.define('Shp.application.SlwStore1', {
extend : 'Ext.data.Store',
id: 'SlwStore1',
model : 'RekSlw1',
autoLoad : true,
proxy :{
type:'ajax',
actionMethods : {read : "POST"},
url:'sahip/slownik',
extraParams:{
task : 'shp_prob0002',
sort : 'slw_id'
},
reader : {
type: 'json',
root: 'wynik',
totalProperty: 'ilosc'
}
}
});


Ext.define('Shp.application.ZzzStore1', {
extend : 'Ext.data.Store',
id: 'ZzzStore1',
model : 'RekZzz1',
autoLoad : true,
proxy :{
type:'ajax',
actionMethods : {read : "POST"},
url:'sahip/slownik',
extraParams:{
task : 'shp_prob0003',
sort : 'zzz_id'
},
reader : {
type: 'json',
root: 'wynik',
totalProperty: 'ilosc'
}
}
});

var SlwStore1 = Ext.create('Shp.application.SlwStore1');
var ZzzStore1 = Ext.create('Shp.application.ZzzStore1');

var RowEditorPlugin = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
autoCancel : true
});


Ext.define('Shp.application.gridInline', {
extend : 'Ext.grid.Panel',
alias : 'widget.gridInline',
id : 'gridInline',
store : Ext.create(myStore1),
floating : false,
border : false,
autoHeight : true,
selType : 'rowmodel',
plugins: [
RowEditorPlugin
],
columns: [
// {header: 'ID', dataIndex: 'src_id', field:'numberfield', flex : 1, align:'center',
{header: 'Imi?', dataIndex: 'src_imie', field:'textfield'},
{header: 'Nazwisko', dataIndex: 'src_nazwisko', field:'textfield'},
{header: 'Data powo?ania', field: 'datefield', align:'center', dataIndex: 'src_dat', xtype:'datecolumn', format : 'Y-m-d'},
{header: 'Od warto?ci', align:'right', field:'numberfield', dataIndex: 'src_od', renderer: function(value, cell) {num = this.formatNumber(value, 2, ' ', ',', '', ' z?', '-', '');str = "<span style='color:#336600;'> " + num +"</span>";return str;}},
{header: 'Do warto?ci', align:'right', field:'numberfield', dataIndex: 'src_do', renderer: function(value, cell) {num = this.formatNumber(value, 2, ' ', ',', '', ' z?', '-', '');str = "<span style='color:#336600;'> " + num +"</span>";return str;}},
{
header: 'S?ownik',
tdCls:'shp_dict',
dataIndex: 'slw_nazwa',
editor: {
xtype:'combo',
store: SlwStore1,
queryMode:'remote',
valueField:'slw_id',
displayField:'slw_nazwa'
}
},
{
header: 'Inny',
tdCls:'shp_dict',
dataIndex: 'zzz_opis',
editor: {
xtype:'combo',
store: ZzzStore1,
queryMode:'remote',
valueField:'zzz_id',
displayField:'zzz_opis'
}

}
],
readStore : function(){
this.store.load({
params: {
start: 0,
limit: pageSize
}
});
},
initComponent : function(){

this.getSelectionModel().setSelectionMode('MULTI');
this.readStore();
this.tbar = Ext.create(myActionToolbar1);
this.dockedItems = [
Ext.create(myFunctionToolbar1, { dock : 'bottom'}),
{
name:'pageTool1',
id:'pageTool1',
xtype: 'pagingtoolbar',
store: this.store,
dock: 'bottom',
displayInfo: true
}
];

this.callParent();
}



I didn't think the toolbars could be important so I omitted their code.

PS.
I also struggle with problem of displaying fieldValue instead of displayValue.
I googled some solutions to this issue but couldn't adapt neither to work with ExtJS4; if someone knows solution, please help.

Thank you in advance,
Wojtek

[skirtle]

The editor is passed a value when it is shown. The value will be obtained from the record using the field specified in dataIndex. This needs to equal a value in the combobox's valueField.

In short, the dataIndex of the column and the valueField of the combobox need to be the same. In either case you can change the value that is actually shown to the user: for columns use a renderer and for comboboxes use a displayField.

[wojteks27]

Thank you very much for your answer.
You have been of great help!