PDA

View Full Version : DataView selectedClass and overClass don't work depending on order of CSS classes?



glafrance
18 Feb 2012, 5:35 PM
Perhaps this reveals my lack of in-depth experience with CSS, but when I create a DataView like this:

var employeeDv = new Ext.DataView({
tpl: employeeDVTpl,
store: employeeDvStore,
singleSelect: true,
itemSelector: "div.emplWrap",
selectedClass: "emplSelected",
overClass: "emplOver",
style: "overflow:auto; background-color: #FFFFFF;"
});

the corresponding CSS classes for selectedClass and overClass must be defined in this order:

.emplSelected {
border: 1px #66FF66 solid;
background-color: #CCFFCC;
cursor: pointer;
}

.emplOver {
border: 1px #9999FF solid;
background-color: #CCCCFF;
cursor: pointer;
}

I know CSS cascades, but selectedClass: "emplSelected" seems to explicitly specify the emplSelected CSS class to the selectedClass config property. Why should the order of the CSS matter?

What if you have a global CSS file and a large app with many DataViews? Must the selectedClass and overClass config properties be specified in the same order, otherwise those that deviate from the CSS order won't work? That's kind of crazy IMNSHO. If that is necessary, it would be great if Ext JS tells the developer that this situation exists, and where.

mitchellsimoens
19 Feb 2012, 6:37 AM
Browsers read the class attribute right to left which usually will take priority. Now to determine which CSS rules should be used, the class first read (more to the right of the class attribute) should take priority.