开发者

Sencha touch: How to refresh input label

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]) 
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜