PDA

View Full Version : Question about combobox with listeners tagged on to it's store



Jangla
25 Jun 2010, 8:47 AM
I'm trying to add an event to the afterRender event of a combo box that will then add a listener to it's store's load event (a json store so it has to be this way) which will then automatically populate the combo box's value property with the value that's in the record that relates to it's valueField.

Needless to say, I'm getting rather lost with scope in that chain and would love some help.

So far I have this:



...
afterRender : function(p) {
var target = this;
var store = this.getStore();
store.addListener('load', {scope : target, fn : function(){
alert(target.getValue());
}, single : true});

Ext.ux.ComboBox.superclass.afterRender.apply(this, arguments);
...


The alert is just in there to let me know when I've got the basics right so I can move on to the next step of setting the value based on the valueField. Obviously the code above doesn't work (or I wouldn't be here).

The whole point of me trying this is to cut down on code when calling a custom combobox I've put into place - you wouldn't have to define both the hiddenValue and the value - the hiddenValue would be enough for the afterRender function to work out what the initial display text of the combo box should be from it's store.

Animal
25 Jun 2010, 10:50 PM
Why override afterRender?

What I do with cascaded comboboxes is to have the child combo add listeners to its parent combo.

So my combos are configured with



parent: 'parentFieldName'


And I have overrides which add listeners to that using



var f = this.getForm(); // An override of Ext.form.Field which finds the encapsulating BasicForm
var parentField = f.findField(this.parent);
.... add listeners to the field or its store

Jangla
27 Jun 2010, 12:55 PM
It's not actually a cascading combo - sorry if it seemed that way from my initial post. It just seemed to me that working out the initial text to display in the combo from it's hiddenValue (populated from it's store) seemed quite sensible and when worked out across a very large application that could have hundreds or thousands of combobox would equate to a significant code saving in re-use.

Animal
27 Jun 2010, 11:58 PM
You mean setting the combo's value on first load to the first Record in the Store?

Jangla
28 Jun 2010, 1:38 PM
Not necessarily the first record, just the displayValue of the record that's been put into the hiddenValue when it loads. It just seems sensible to set both the hiddenValue and displayValue on load - you are, after all, already telling the combo which field to display and which to use as a value; you should therefore only have to tell it which record in the store to point to once and not twice (hiddenValue and value).

Having said that, I have a sense of foreboding that you're about to tell me something really obvious I've missed that would achieve just that :)

CrazyEnigma
28 Jun 2010, 1:55 PM
I use the store's "load" listener to set the value. Seeing as you have loaded the data, you can set the value in the combo.

Getting the proper record is a different story, it has to come from somewhere else, but I guess I'll leave that up to you.

Jangla
29 Jun 2010, 5:57 AM
Yea, that's what the initial post was asking about - the store is a JsonStore so I have to add a listener to the load event on the store but the scope gets out of hand so I can't work my way back up to set the value.

Animal
29 Jun 2010, 6:25 AM
It's not actually a cascading combo - sorry if it seemed that way from my initial post. It just seemed to me that working out the initial text to display in the combo from it's hiddenValue (populated from it's store) seemed quite sensible and when worked out across a very large application that could have hundreds or thousands of combobox would equate to a significant code saving in re-use.

I just can't understand.

You load the Store.

SO then what do you want to set the Field's value to?

CrazyEnigma
29 Jun 2010, 6:29 AM
I don't see the need to extend the combo component to do such a thing.




this.store = new Ext.data.Store({
// configuration
});
this.combo = new Ext.form.ComboBox({
// configuration
store: this.store
});
this.store.on("load", function(store, recs, opts) {this.combo.setValue(recs[0].id)}, this);


Or whatever initial record you would like.

Jangla
29 Jun 2010, 6:36 AM
Sorry - I'm not explaining this very well am I?

I'll try again:

Imagine you're returning some records from a database onto an Ext form. On your form you have a country drop down which will be populated by the JsonStore.

So you return some records from your database with a JsonStore and attach that store to the relevant combobox.

As things currently stand, with default behaviour, your combo box will now have a load of records in it when you drop it down but unless you set the 'hiddenValue' and 'value' properties when you script the combobox, there will be no 'currently selected record' in the combobox itself.

I would like to cut down on the requirement to set both those fields by setting one from the other with a function attached to a subclassed combobox. It doesn't sound like much of a saving but when multiplied out across a large application, I reckon it's significant.

Animal
29 Jun 2010, 6:37 AM
So, call setValue in a load listener.

CrazyEnigma
29 Jun 2010, 6:39 AM
Doesn't the combobox already have a hidden box, and does this not get set from the setValue?!? Do you have another hidden field that we don't know about?