PDA

View Full Version : combobox-editor in grid



MJFox
12 Mar 2014, 8:14 AM
Hi!

I'm using a combobox-editor in a grid. This is the code of the column:


{ text: 'POI',
flex: 1,
dataIndex: 'poi_id',
hidden: false,
renderer: function(value, metaData, record, row, col, store, view) {
return record.data.poi_name;
},
editor: {
xtype: 'combo',
store: ds,
displayField: 'name',
typeAhead: false,
hideLabel: true,
hideTrigger:true,
anchor: '100%',
valueField: 'id',
forceSelection: true,
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching pois found.',


// Custom rendering template for each item
getInnerTpl: function() {
return '{name}';
}
},
pageSize: 10,
listeners: {
select: function(editor, object) {
var record = grid.getSelectionModel().getSelection();
record[0].set("poi_id",this.getValue());
record[0].set("poi_name",this.getRawValue());
},
focus: function(editor, object) {
var record = grid.getSelectionModel().getSelection();
if(this.getRawValue()=="" && record[0].data.poi_id) {
// how to set the input field value of the combobox here?
}
}
}
}
},

the combobox-store is using a remote-store

what I'm trying to do is to let the user choose a "poi_name" in the combobox and store the corresponding "poi_id" in the data-store of the grid

since the combobox-store is empty when the grid renders I'm using a renderer-function for the field to put the "poi_name" there - this works fine

however as soon as I start to edit the field and the combobox appears, the combobox' input field is empty instead of showing "poi_name" there

how can I set the input field to the value of "poi_name" of the grids datastore? I tried to use the focus-listener to set the value but it doesn't do anything

any help is greatly appreciated

greetings

MJFox

mixo
13 Mar 2014, 3:16 AM
first of all check that your combo editor's store contains selected cell value

MJFox
13 Mar 2014, 3:21 AM
the cell value is fine, ass soon as I select something from the combobox and save the change (end the editing) and open the editor again, the value is there

I guess the problem is that the combobox store doesn't know the poi_name for the given poi_id... the cell-renderer takes poi_name from the grid-store, but the combobox doesn't

also I have the feeling that either the comobox with a remote-store is not suitable as an editor for the grid or I'm using this wrong... my workaround to set the poi_name in the grid-store and let the cell-renderer use this poi_name doesn't seem to be the right way to do this :-?

I searched a lot but I couldn't find an example of a grid using a combobox with a remote store that shows the display-field and not the value-field in the grid

greetings

MJFox

f.baron
13 Mar 2014, 7:11 AM
Hi! What's the model of the store of your editor? does it have the 'id' and 'name' fields as the grid model?

MJFox
13 Mar 2014, 7:19 AM
this is the store of the grid:



var store = Ext.create('Ext.data.Store', {
fields: [
'campaign_poi_id',
'campaign_id',
'poi_id',
'poi_name',
'distance'
],
proxy: {
type: 'ajax',
api: {
read: 'api/?view=get_campaign_pois&campaign_id=' + campaign_id,
create: 'api/?view=save_campaign_poi',
update: 'api/?view=save_campaign_poi',
destroy: 'api/?view=delete_campaign_poi'
},
reader: {
messageProperty: 'message',
type: 'json',
root: 'items',
totalProperty: 'totalCount'
},
writer: {
type: 'json'
},
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
afterRequest:function(request,success){


if (!request.operation.wasSuccessful()) {


Ext.MessageBox.show({
title: 'Error',
msg: request.operation.getError(),
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});


}


}
},
autoLoad: true,
autoSync: true
});


and this is the store of the combobox:



Ext.define("poiModel", {
extend: 'Ext.data.Model',
proxy: {
type: 'jsonp',
url : 'api/?view=get_pois_for_combobox',
reader: {
type: 'json',
root: 'pois',
totalProperty: 'totalCount'
}
},


fields: [
{name: 'id', mapping: 'poi_id'},
{name: 'name', mapping: 'poi_name'}
]
});


var dsPOIs = Ext.create('Ext.data.Store', {
autoLoad : true,
pageSize: 10,
model: 'poiModel'
});


as you can see I'm getting both the poi_name and the poi_id in the grids store so I know the poi_name to each poi_id in the grid

the problem is that the combobox store doesn't know the poi_name until the store gets its remote data when I search for an entry in the combobox

greetings

MJFox

f.baron
13 Mar 2014, 7:26 AM
You could call a first load of the combo store before the grid is rendered, so you are sure data are already loaded the first time you open the combo editor (and the you could use queryMode 'local').

MJFox
13 Mar 2014, 7:31 AM
You could call a first load of the combo store before the grid is rendered, so you are sure data are already loaded the first time you open the combo editor (and the you could use queryMode 'local').

but I have several thousands POIs in my database, I can not make a call for each poi_id I have in the grid :(

f.baron
13 Mar 2014, 7:41 AM
but I have several thousands POIs in my database, I can not make a call for each poi_id I have in the grid :(

So if autoload starts when you start edit you could set the value of the combo in the 'load' event callback! If the auotoload starts when you click the trigger you need to force a load in the 'beforeedit' event and also set the combo value in the 'load' callback.

MJFox
13 Mar 2014, 7:47 AM
So if autoload starts when you start edit you could set the value of the combo in the 'load' event callback! If the auotoload starts when you click the trigger you need to force a load in the 'beforeedit' event and also set the combo value in the 'load' callback.

I already know the value of the combobox, because I load the poi_name together with the poi_id in the grid! but how do I set the value of the combo? I tried to set the input-field of the combobox when the input-fields gets focus (see the red text in my first post in this thread), but whatever I tried, the input-field always stayed empty

greetings

MJFox

f.baron
13 Mar 2014, 7:52 AM
In the combo you must show data of the combo store! If you don't want to load that store remotely you could load only the data you already have (editorcombo.store.loadData([{id='id',name='name'}])) and set the current value (editorcombo.setValue(id)). Then when the combo trigger will be clicked the store will load all the data.
It could be fine?

MJFox
13 Mar 2014, 8:01 AM
In the combo you must show data of the combo store! If you don't want to load that store remotely you could load only the data you already have (editorcombo.store.loadData([{id='id',name='name'}])) and set the current value (editorcombo.setValue(id)). Then when the combo trigger will be clicked the store will load all the data.
It could be fine?

I could try that, thanks a lot for your efforts! =D>

greetings

MJFox

f.baron
13 Mar 2014, 8:03 AM
I could try that, thanks a lot for your efforts! =D>

greetings

MJFox

Nice! :D