I have an Ext.form.Select
that I want to update it's label dynamically when it's value changes. Simple as it sounds, it refuses to work:
var musicInCarInput = new Ext.form.Select({
options: [
{text: "Yes", value: "yes"},
{text: "Maybe", value: "maybe"},
{text: "No", value: "no"}
],
name: "music",
value: "maybe",
label: '<img src="/static/images/comfort_icons/music_maybe_small.png" />',
listeners: {
change: function()
{
musicInCarInput.label = '<img src="/static/images/comfort_icons/music_'+musicInCarInput.getValue()+'_small.png" />';
}
}
});
I tried to call doLayout()
after I change the label, but I'm told that the input has no property 'doLayout', although documen开发者_JAVA技巧ted so.
Any ideas anyone ?
This doesn't answer the answer directly, because I didn't found how to update the label, so further answers are welcomed. The solution that i found for me is to get the label image by and id, and update it.
If someone else needs this, here is the code:
var musicInCarInput = new Ext.form.Select({
options: [
{text: "Yes", value: "yes"},
{text: "Maybe", value: "maybe"},
{text: "No", value: "no"}
],
name: "music",
value: "maybe",
label: '<img id="music_input_label" src="/static/images/comfort_icons/music_maybe_small.png" />',
listeners: {
change: function()
{
el = Ext.getDom('music_input_label');
el.setAttribute("src", '/static/images/comfort_icons/music_'+this.getValue()+'_small.png')
}
}
});
The correct answer came to me from realjax on SenchaTouch forums: there is a property on the select (that I'm ashamed that I've missed) called labelEl, which can be used to update the bale like this:
musicInCarInput.labelEl.setHTML([your hmtl stuff])
精彩评论