1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    27
    Vote Rating
    0
    solovieff13 is on a distinguished road

      0  

    Exclamation Multiselect Item CSS

    Multiselect Item CSS


    Hi, I have multiselect field in my form. In multiselect.css in examples I see:
    Code:
    .ux-mselect{
        overflow:auto;
        background:white;
        position:relative; /* for calculating scroll offsets */
        zoom:1;
        overflow:auto;    
    }
    .ux-mselect-item{
        font:normal 25px tahoma, arial, helvetica, sans-serif;
        padding:2px;
        border:1px solid #fff;
        white-space: nowrap;
        cursor:pointer;
    }
    .ux-mselect-selected{
        border:16px dotted #a3bae9 !important;
        background:#DFE8F6;
        cursor:pointer;
    }
    But if I change second two styles nothing happens. I want to add default icon to my muliselect box items, how can I do it? I see, multiselect is using ListView inside it, but how can I change it's css not to apply these changes to all of my application?

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I see, multiselect is using ListView inside it, but how can I change it's css not to apply these changes to all of my application?
    All components should support a cls config option that allows you to specify a CSS class to apply to the outermost element of the component. You can then scope any CSS changes you make to within that class, such that other components are not affected.

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    27
    Vote Rating
    0
    solovieff13 is on a distinguished road

      0  

    Default


    I have a store for Multiselect, how can I set a cls element for each line in Multiselect? I just fill in an array like:
    arr = [eventsRows.rows[i][0]];
    evArrayToExtJs.push(tempArr);
    eventsStore.loadData(evArrayToExtJs);

    So, where should I use cls attribute?

    If I do:
    var eventsStore = new Ext.data.ArrayStore(
    {
    fields : ['name', 'cls']
    }
    );
    and then set cls attribute for objects I put into arr -- nothing happens.

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The cls option is at the component level, it should not be a field in the store. Please read the API docs for this option, it can be found on Ext.Component.

    Once you have set the cls for the component it will be applied to the outermost HTML element. You should then use an HTML inspection tool such as Firebug or the Chrome Developer Tools so that you can see the CSS class applied and see what elements exist beneath it to render the rows. This should allow you to work out what CSS rules are required to do whatever styling you require.

    If you need to display a different icon for each row then CSS styling alone probably won't be sufficient. You may need to write an extension or plugin.

Thread Participants: 1

Tags for this Thread