PDA

View Full Version : Return a value in addListener method?



samax
17 Jul 2009, 12:30 AM
Hello,
My problem is that I need to display in a grid panel with a Row Editor the display values of the fields which are represented by a combobox. For this, I use the rendered function in my columns to display the correct value.

Here is my code:



var storeTemp = new mmw.bib_conservationStore({autoLoad: true});

mmw.elements_paysagersEditorGridPanel = Ext.extend(Ext.GridPanel, {
initComponent: function() {
var bib_element_paysagerStore = new mmw.bib_element_paysagerStore({autoLoad: true});
var store = new mmw.elements_paysagersStore();
Ext.apply(this, {
store: store,
columns: [
{header:'Eléments du paysage',width:75,sortable:true,dataIndex:'elements_paysagers__codeep',editor:{allowBlank:false,xtype:'combo',emptyText:'Enter a value',triggerAction:'all',store:bib_element_paysagerStore,displayField:mmw.baseSfBib_element_paysagerObject.displayField,valueField:mmw.baseSfBib_element_paysagerObject.keyField},renderer:function(value) { return bib_element_paysagerStore.getRecordDisplayFieldValue(value); }},
]
});
mmw.elements_paysagersEditorGridPanel.superclass.initComponent.call(this);
}
});


Here is the method of the store which I call:


getRecordDisplayFieldValue: function(id) {
var index = this.find(this.sfObject.keyField, id);
return (index != "-1") ? this.getAt(index).get(this.sfObject.displayField) : '{unknown}';
},

When I use the "bib_element_paysagerStore", this function returns '{unknown}', and when I use "storeTemp", it returns the correct display value.

I suspected that the store was not loaded yet, so I inserted a listener on the loading of it, but now it returns nothing... It's a pity when I see that the index is well find (I see that when I do a console.log on it).


getRecordDisplayFieldValue: function(id) {
this.on('load', function(){
var index = this.find(this.sfObject.keyField, id);
return (index != "-1") ? this.getAt(index).get(this.sfObject.displayField) : '{unknown}';
}, this);
},


Does someone has a solution for this issue?

Thanks.

wvmaaren
17 Jul 2009, 1:00 AM
Hey,

I'm still pretty new to EXTjs but I had a lot of problems figuring out a way to get my Combo's filled the way I wanted them too...

to me is seems like ur renderer isn't doing its job well.

I finally got this code working, maybe it would help.



//Creating an Array for storing the data
var myProject = [];

//Creating a data renderer for my combo
Ext.util.Format.comboRenderer = function(combo){
returnfunction(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}

//Creating my Combo
comboProject = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
lazyRender : true,
mode : 'local',
store : new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
]
}),
valueField : 'myId',
displayField : 'displayText'
});

//Getting my combo into the editable grid
columns: [
header: 'Project',
dataIndex: 'project',
sortable: true,
width: 150,
editor: comboProject, // specify reference to combo instance
renderer: Ext.util.Format.comboRenderer(comboProject)
]

//Loading my data
//First load the Grids data, then load the combo data



I hope this will help u.

Good Luck,

Wouter van Maaren

samax
17 Jul 2009, 1:42 AM
Thank you for your reply, but your solution doesn't works in my case, because you're in local mode, and in remote mode the store isn't loaded yet when the renderer function is called. It means that the combobox store is empty and the display value is not present yet so the correspondance between thd id and the display field cannot be did.

wvmaaren
17 Jul 2009, 2:33 AM
My Store is also loaded remotely, I just use a SimpleStore and parse my arrays using Ajax. I first load my Grid, then in the requestfunction I load my Combos.

samax
17 Jul 2009, 2:40 AM
I don't understand: if you load your grid before loading your comboboxes, the stores of these comboboxes won't be loaded when you'll display your grid, and the records will display an id, no?

wvmaaren
17 Jul 2009, 4:18 AM
I'll show you how i do it at this moment.

at the end of my Ext.onReady function I call this javascript function:
gridrequest();



function gridrequest()
{
combourenrequest();



ajaxFunction("/ControllersAjax/uren/GridData", "week=" + week + "&year=" + year + "&werknemer=" + werknemer + "&project=" + project + "&geaccoordeerd=" + geaccoordeerd , "gridreturn", true);
}

function combourenrequest()
{
ajaxFunction("/ControllersAjax/uren/UrenCombo", "declarabel=" + checkboxGeaccoordeerd.checked, "combourenreturn", true);
}

function combourenreturn(data)
{
myUren = eval(data);
comboUren.store.loadData(myUren);
}

function gridreturn(data)
{
store.removeAll();
myData = eval(data);
store.loadData(myData);
gridDecl.reload;
}



The ajaxFunction I use is just the connector between my C# backend and the Javascript frontend. Both functions are asychoniously, both they always work.

wvmaaren
17 Jul 2009, 4:24 AM
You could also use the way Animal told me, this is the way ExtJS normaly fills the stores.
In this way u fire the events after eachother.

(I'm sorry Animal for sharing your code)



var req3 = function() {
Ext.Ajax.request({
url: "/ControllersAjax/uren/WeeknummerCombo",
params: {
declarabel: 1
},
success: function() {
alert("All three done");
}
});
};

var req2 = function() {
Ext.Ajax.request({
url: "/ControllersAjax/uren/WerknemerCombo",
params: {
week: week,
year: year
},
success: req3 // call req3 when this returns successfully
});
};

var req1 = function() {
Ext.Ajax.request({
url: "/ControllersAjax/uren/GridData",
params: {
week: week,
year: year
},
success: req2 // Call req2 when this returns successfully
});
};

// Kick them all off:
req1();