1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default Ext.form.ComboBox transforming a <select>

    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.

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    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>';
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Heh! Nice one Jack. Works perfectly.

  4. #4
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    9
    Vote Rating
    0
    tpoon is on a distinguished road

      0  

    Default


    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.

  5. #5
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
    stephen.friedrich will become famous soon enough

      0  

    Default


    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);
            }
        });
    })();