PDA

View Full Version : DomQuery "style" attribute select not working in IE7



vukbyte
10 Sep 2010, 2:42 PM
I have a reference to the root element of a dom with all different sub-elements. For example:
<div id="root_node">
<div style="text-align: left;">Some text aligned left<br></div>
<div style="text-align: right;">Some Text aligned right<br></div>
<div style="text-align: center;">Some test aligned center</div>
</div>


I am trying to find all sub elements that have text-align explicitly specified in the style attribute. For example the following selector returns 3 element as a result in all browsers except for IE7.

var result = root_node.select("*[style*='text-align'], *[style*='TEXT-ALIGN']");


In IE7 I get an Exception in Ext. Object doesn't support this property or method
Located in DomQuery.js

operators : {
"=" : function(a, v){
return a == v;
},
...
"*=" : function(a, v){
return a && a.indexOf(v) !== -1;
},

The problem seems to only happen when looking in the "style" attribute. I am able to search in other attributes. Is any one else experiencing this problem?

I am using ExtJs 3.2.1

laurentParis
10 Sep 2010, 4:23 PM
use always uppercase to designate attributs


var result = root_node.select("*[STYLE*='text-align'], *[STYLE*='TEXT-ALIGN']");

vukbyte
12 Sep 2010, 7:49 AM
I was able to fix this issue by adding some code to the byAttribute function in DomQuery. See the commented Fixup code below.



// operators are =, !=, ^=, $=, *=, %=, |= and ~=
// custom can be "{"
function byAttribute(cs, attr, value, op, custom){
var result = [],
ri = -1,
useGetStyle = custom == "{",
fn = Ext.DomQuery.operators[op],
a,
innerHTML;
for(var i = 0, ci; ci = cs[i]; i++){
// skip non-element nodes.
if(ci.nodeType != 1){
continue;
}

innerHTML = ci.innerHTML;
// we only need to change the property names if we're dealing with html nodes, not XML
if(innerHTML !== null && innerHTML !== undefined){
if(useGetStyle){
a = Ext.DomQuery.getStyle(ci, attr);
} else if (attr == "class" || attr == "className"){
a = ci.className;
} else if (attr == "for"){
a = ci.htmlFor;
} else if (attr == "href"){
a = ci.getAttribute("href", 2);
} else if (Ext.isIE7 && attr == "style"){
// Fixup::: getAttribute returns a style object. The cssText property
// contains the contents of the style attribute. Ex: 'color: red; top 5px;'
a = ci.getAttribute("style").cssText;
} else{
a = ci.getAttribute(attr);
}
}else{
a = ci.getAttribute(attr);
}
if((fn && fn(a, value)) || (!fn && a)){
result[++ri] = ci;
}
}
return result;
}This fix may do without the Ext.isIE7, but I added that check to limit any regression in existing code. My guess is this is an Ext bug.