Ext JS 3.4 - Update Display field of a combobox without losing hidden value

Question

So I have a combobox list populated with icons then a small description. Originally when I would select one item it would then put the html into the display as a raw value. Obviously having RAW html in the display wasn't what i wanted so i tried stripping the image tag and using the other information as the raw value.

This worked for display but the display and the value are different. (using a hiddenName field etc) and setting the raw value not only updates the display field but also updates the value. This is not acceptable.

On selecting an item I parse out the image tag and would like to ONLY update the display field. The problem here is there is no method i can find to ONLY update the display field and leave the hidden value alone.

How can i update the display field without messing with the hidden value field?

Update: I tried this....so close but no cigar...

select: function() {
            console.log(this.el.dom.value);
            this.el.dom.value = 'test';
}

This updated the display field to be 'test' but then for some magical reason when i click off of the combobox it sets my hidden value equal to my display value....any ideas?

Update 2: I have also tried suspending all events on the combobox by putting this.suspendEvents() at the end of the select listener....still no go. I cannot for the life of me figure out why the hidden value gets changed upon box blur. I have tried returning false in blue and change listener events.....preventDefault has no effect.

Am I not making myself clear? Is there anything you guys want me to add that might help us come to a conclusion? — Bill Garrison

Pankaj Landge Pankaj Landge · Accepted Answer · 2013-11-25T12:15:32

if you take a look at this link: http://docs.sencha.com/extjs/4.2.1/source/ComboBox.html#Ext-form-field-ComboBox

there is function **setValue: function(value, doSelect) {...** it has below lines somewhere::

me.setHiddenValue(processedValue);

me.setRawValue(me.getDisplayValue());

These lines are doing a magical stuff which you mentioned.

Now, to solve your problem, I guess you can do this:

 select: function() {
                console.log(this.el.dom.value);
                var actualValue = this.el.dom.value;
                this.el.dom.value = 'test';
                this.setRawValue(actualValue );
                this.setHiddenValue(actualValue);
    }

Hope this helps, I have not tested the code though!

Ext JS 3.4 - Update Display field of a combobox without losing hidden value

1 Answers