Results 1 to 2 of 2

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

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    172

    Default DataView selectedClass and overClass don't work depending on order of CSS classes?

    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.

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    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.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •