[2.0.1][OPEN] setStyle with float

[mattbennett]

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

[aconran]

We'll take a look at this.

[Animal]

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

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

[Animal]

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

[brian.moeskau]

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.

[jack.slocum]

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. :/

[Condor]

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?

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

[evant]

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:

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.

[juxtaposed]

/// Snip

Ext.get('foo').setStyle({
    float: 'left' //no errors, IE6/IE7
});

// Snip

It doesn't work with IE8 or IE9. If I use

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.