Ext.form.ComboBox transforming a <select>

Code:

---

    if(this.transform){
        this.allowDomMove = false;
        var s = Ext.getDom(this.transform);
        if(!this.hiddenName){
            this.hiddenName = s.name;
        }
        if(!this.store){
            this.mode = 'local';
            var d = [], opts = s.options;
            for(var i = 0, len = opts.length;i < len; i++){
                var o = opts[i];
                var value = (Ext.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
                if(o.selected) {
                    this.value = value;
                }
                d.push([value, o.text]);
            }
            this.store = new Ext.data.SimpleStore({
                'id': 0,
                fields: ['value', 'text'],
                data : d
            });
            this.valueField = 'value';
            this.displayField = 'text';
        }
        s.name = Ext.id(); // wipe out the name in case somewhere else they have a reference
        if(!this.lazyRender){
            this.target = true;
            this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);
            s.parentNode.removeChild(s); // remove it
            this.render(this.el.parentNode);
        }else{
            s.parentNode.removeChild(s); // remove it
        }

    }
    this.selectedIndex = -1;
    if(this.mode == 'local'){
        if(config.queryDelay === undefined){
            this.queryDelay = 10;
        }
        if(config.minChars === undefined){
            this.minChars = 0;
        }
    }

---

The highlighted code should make the value o.text HTML-safe.

If I transform a select which looked like this:

Code:

---

<select>
  <option value="">&lt;Select an option></option>
  <option value="1">Foo</option>
  <option value="2">Bar</option>
</select>

---

It ends up with the string "<Select an option>" as the display value which gets mangled when set as innerHTML in the drop down.

This is a general principle where text is extracted to be later used as innerHTML.

Surrounding text with "<" and ">" is a common usage to indicate that the text is instructional rather than a submittable data value.

I agree 100% that this could b a problem. To avoid the overhead where it isn't needed, might I suggest a template config?

tpl:'<div class="x-combo-list-item">{text:htmlEncode}</div>';

Heh! Nice one Jack. Works perfectly.

Thanks for the great solution Jack.

FYI, I found that the syntax needs to be a little different in Ext 2.0:

Code:

---

tpl: '<tpl for="."><div class="x-combo-list-item">{[fm.htmlEncode(values.text)]}</div></tpl>'

---

Hopefully this will be helpful to other people.

For people finding this old thread via google:

This is what I am doing in Ext 3:

PHP Code:

---

(function(){
    var initListExtJs = Ext.form.ComboBox.prototype.initList;
    Ext.override(Ext.form.ComboBox, {
        initList: function() {
            if(!this.tpl) {
                this.tpl = '<tpl for="."><div class="x-combo-list-item">{' + this.displayField + ':htmlEncode}</div></tpl>';
            }
            initListExtJs.call(this);
        }
    });
})(); 


---