1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    580
    Vote Rating
    0
    dolittle is an unknown quantity at this point

      0  

    Default [2.1] overCls in combobox doesn't work with renderTo

    [2.1] overCls in combobox doesn't work with renderTo


    Hi,

    The overCls config works when applying a combobox to existing input element
    but when using renderTo and creating the combobox dynamically, overCls has no effect.

    Thanks

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    testcase?

    other details as per http://www.sencha.com/forum/showthread.php?t=13985?

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    580
    Vote Rating
    0
    dolittle is an unknown quantity at this point

      0  

    Default


    test case with the combos example inside examples/form folder Ext2.1:

    open the comobos.html
    change:
    Code:
    <input type="text" id="local-states" size="20"/>
    to:
    Code:
    <div type="text" id="local-states" size="20"/>
    open combos.js
    change:
    Code:
    applyTo: 'local-states',
    to:
    Code:
    renderTo: 'local-states',
    add:
    Code:
    overCls: 'test',
    Watch the combo with firefox and see that there is no 'test' class when hovering.
    When adding the overCls with applyTo it works.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    580
    Vote Rating
    0
    dolittle is an unknown quantity at this point

      0  

    Default


    bump

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    overCls is assigned by Component.onRender() if the el is defined. All decendant classes override onRender, call the superclass onRender and proceed to create the el. This means that the overCls handlers will only be registered when using el, autoEl, applyTo or apply() and not with renderTo or render().

    I suggest moving the overCls handler registration from onRender() to render(), e.g.

    Code:
    Ext.override(Ext.Component, {
    	render : function(container, position){
    		if(!this.rendered && this.fireEvent("beforerender", this) !== false){
    			if(!container && this.el){
    				this.el = Ext.get(this.el);
    				container = this.el.dom.parentNode;
    				this.allowDomMove = false;
    			}
    			this.container = Ext.get(container);
    			if(this.ctCls){
    				this.container.addClass(this.ctCls);
    			}
    			this.rendered = true;
    			if(position !== undefined){
    				if(typeof position == 'number'){
    					position = this.container.dom.childNodes[position];
    				}else{
    					position = Ext.getDom(position);
    				}
    			}
    			this.onRender(this.container, position || null);
    			if(this.overCls) {
    				this.el.addClassOnOver(this.overCls);
    			}
    			if(this.autoShow){
    				this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
    			}
    			if(this.cls){
    				this.el.addClass(this.cls);
    				delete this.cls;
    			}
    			if(this.style){
    				this.el.applyStyles(this.style);
    				delete this.style;
    			}
    			this.fireEvent("render", this);
    			this.afterRender(this.container);
    			if(this.hidden){
    				this.hide();
    			}
    			if(this.disabled){
    				this.disable();
    			}
    			if(this.stateful !== false){
    				this.initStateEvents();
    			}
    		}
    		return this;
    	},
    	onRender : function(ct, position){
    		if(this.autoEl){
    			if(typeof this.autoEl == 'string'){
    				this.el = document.createElement(this.autoEl);
    			}else{
    				var div = document.createElement('div');
    				Ext.DomHelper.overwrite(div, this.autoEl);
    				this.el = div.firstChild;
    			}
    			if (!this.el.id) {
    				this.el.id = this.getId();
    			}
    		}
    		if(this.el){
    			this.el = Ext.get(this.el);
    			if(this.allowDomMove !== false){
    				ct.dom.insertBefore(this.el.dom, position);
    			}
    			/*if(this.overCls) {
    				this.el.addClassOnOver(this.overCls);
    			}*/
    		}
    	}
    });

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    580
    Vote Rating
    0
    dolittle is an unknown quantity at this point

      0  

    Default


    bump.

    This issue is still present at Ext 2.2.
    Tested with a textField.
    Condor's fix solve it.

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,065
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    In the latest 2.x and 3.x branches overCls is handled inside the render method:

    2.2.x
    Code:
    render : function(container, position){
            if(!this.rendered && this.fireEvent("beforerender", this) !== false){
                if(!container && this.el){
                    this.el = Ext.get(this.el);
                    container = this.el.dom.parentNode;
                    this.allowDomMove = false;
                }
                this.container = Ext.get(container);
                if(this.ctCls){
                    this.container.addClass(this.ctCls);
                }
                this.rendered = true;
                if(position !== undefined){
                    if(typeof position == 'number'){
                        position = this.container.dom.childNodes[position];
                    }else{
                        position = Ext.getDom(position);
                    }
                }
                this.onRender(this.container, position || null);
                if(this.autoShow){
                    this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
                }
                if(this.cls){
                    this.el.addClass(this.cls);
                    delete this.cls;
                }
                if(this.style){
                    this.el.applyStyles(this.style);
                    delete this.style;
                }
                if(this.overCls){
                    this.el.addClassOnOver(this.overCls);
                }
                this.fireEvent("render", this);
                this.afterRender(this.container);
                if(this.hidden){
                    this.hide();
                }
                if(this.disabled){
                    this.disable();
                }
    
                if(this.stateful !== false){
                    this.initStateEvents();
                }
            }
            return this;
        }
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 3