1. #1
    Sencha User
    Join Date
    Jul 2007
    Location
    London
    Posts
    25
    Vote Rating
    1
    mattbennett is on a distinguished road

      0  

    Default [2.0.1][OPEN] setStyle with float

    [2.0.1][OPEN] setStyle with float


    This is a bump of an old thread raised on 1.x [1] - it still applies to 2.0.1

    There is no special handling for 'float' within 'setStyle'.

    el.setStyle('float', 'left'); // doesn't work
    el.setStyle('cssFloat', 'left'); // works in standards compliant browsers
    el.setStyle('styleFloat', 'left'); // works in IE

    Perhaps not strictly a bug, but I'm not allowed to post in the 'feature requests' section :(

    [1] http://extjs.com/forum/showthread.ph...setStyle+float

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,413
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    We'll take a look at this.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

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

      0  

    Default


    Can this be looked at again?

    Ext normalizes the opacity setting to handle browser quirks, it shojld also normalize setting of float in a cross browser manner.

    This is a unique case because of two intersecting problems.

    Firstly, IE is non-standard, and uses 'styleFloat', and secondly, the standard Javascript style name does not match the CSS style name. We're supposed to use 'cssFloat'

    Usually, the CSS style name is just camelcased to create the Javascript style name, but 'float' appears to be disallowed (perhaps conflicting with planned datatypes)

    But for total consistency, the method should be

    Code:
        setStyle : function(prop, value){
            if(typeof prop == "string"){
                var camel;
                if(!(camel = propCache[prop])){
                    camel = propCache[prop] = prop.replace(camelRe, camelFn);
                }
                if(camel == 'opacity') {
                    this.setOpacity(value);
                }else{
                    if (camel == 'float') {
                        camel = Ext.isIE ? 'styleFloat' : 'cssFloat';
                    }
                    this.dom.style[camel] = value;
                }
            }else{
                for(var style in prop){
                    if(typeof prop[style] != "function"){
                       this.setStyle(style, prop[style]);
                    }
                }
            }
            return this;
        }

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

      0  

    Default


    The silly thing is that Ext.Element::getStyle does do this normalization of 'float', while setStyle doesn't!

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Yeah, I was just looking at this the other day and saw that getStyle does include that check. This must have just been an oversight -- we'll get it fixed shortly. Thanks for the patch.

  6. #6
    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


    Using 'float' (the string) is not a good solution. It will break in various standard scenarios (e.g. setting styles from in hash object in IE).

    The other issue, is setStyle is called pretty frequently. I would really hate to add an additional conditional for a style that will be set using setStyle 1 out of 1,000,000,000 times setStyle is called. :/
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  7. #7
    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


    Bump - This has come up again.

    @Jack: If you're so concerned about setStyle overhead, why not move the code to the propCache, so it is only executed once?
    Code:
    Ext.override(Ext.Element, {
    	setStyle : function(prop, value){
    		if(typeof prop == "string"){
    			var camel;
    			if(!(camel = propCache[prop])){
    				camel = prop.replace(camelRe, camelFn);
    				if(camel == 'float'){
    					camel = Ext.isIE ? 'styleFloat' : 'cssFloat';
    				}
    				propCache[prop] = camel;
    			}
    			if(camel == 'opacity') {
    				this.setOpacity(value);
    			}else{
    				this.dom.style[camel] = value;
    			}
    		}else{
    			for(var style in prop){
    				if(typeof prop[style] != "function"){
    				   this.setStyle(style, prop[style]);
    				}
    			}
    		}
    		return this;
    	}
    });

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,055
    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


    I'll have to check this with Jack, you can set float using an object hash, I'm not sure what other conditions will cause this to break though:

    Code:
    Ext.get('foo').setStyle({
        float: 'left' //no errors, IE6/IE7
    });
    RE: the performance issue, we could add a setFloat method, similar to setOpacity. As Jack suggested, the extra check in setStyle would be a redundant most of the time and it does get called a lot.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  9. #9
    Sencha User
    Join Date
    Jun 2010
    Posts
    2
    Vote Rating
    0
    juxtaposed is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    /// Snip
    Code:
    Ext.get('foo').setStyle({
        float: 'left' //no errors, IE6/IE7
    });
    // Snip
    It doesn't work with IE8 or IE9. If I use

    Code:
    element.setStyle('styleFloat', 'right'); // works only in IE
    element.setStyle( {float: 'right'}); // works only in FF/Chrome
    element.setStyle('float', right'); // works only in FF/Chrome


    The only way I've found to make it work consistently is to call setStyle twice on the element.