1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    28
    Vote Rating
    0
    Answers
    1
    Edward Lu is on a distinguished road

      0  

    Default Answered: How to change the selected item color for the list?

    Hello,

    I have several cards that display several different lists. When the item in the list has been selected, the background color in the selected item will be changed to default blue. How can I change the background color for selected item in each list in each card?

    My code is (for one list)

    { xtype: 'list',
    store: 'mystore',
    itemTpl: '<div class="x-list-normal, x-list-item,x-item-selected, x-list-item-label" style="background-color:white">{myvariable in the list} </div>'
    }

    This doesn't work, the selected item always has the default blue color in backgroud.

    P.S. I want to change in different colors, not only one which is default blue to something.

    Anyone has any suggestions? Thanks.

    Edward

  2. You'll be able to do this through the theming framework:

    http://www.sencha.com/learn/theming-sencha-touch/

    Specifically, you'll want to change the listitemselect class thusly

    Code:
    .listitemselect {
       background: $my_new_gradient;
       text-shadow: $my_new_stunning_effect;
    }
    To have a different color on different lists, you'll have to set up a cls within each config object afaik.

  3. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    39
    Vote Rating
    2
    Answers
    3
    Rhoover is on a distinguished road

      0  

    Default

    You'll be able to do this through the theming framework:

    http://www.sencha.com/learn/theming-sencha-touch/

    Specifically, you'll want to change the listitemselect class thusly

    Code:
    .listitemselect {
       background: $my_new_gradient;
       text-shadow: $my_new_stunning_effect;
    }
    To have a different color on different lists, you'll have to set up a cls within each config object afaik.

  4. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    28
    Vote Rating
    0
    Answers
    1
    Edward Lu is on a distinguished road

      0  

    Default

    Thank you Rhoover. I got it!

  5. #4
    Sencha User
    Join Date
    Apr 2016
    Posts
    1
    Vote Rating
    0
    Wetyplodocus is on a distinguished road

      0  

    Default

    Hello Im new at the forum, I know this is an old question, but I'm really stucked at it.

    Im new to CSS and Sencha and im still unable to change the background color of a list-item when it's tapped, I have try to assign a cls to my list, defined in a custom css file, like this:


    myView.js
    Code:
            
            xtype : 'list',        cls   : 'menu-list',
            scrollable: false,
            height: '100%',
            itemTpl: itemTemplate,
            store: MenuListStore
    myStyle.css
    Code:
    .menu-list .x-list-item {
        background-color: white;
        -webkit-transition: background-color, color 150ms linear;
        -webkit-transition-delay: 250ms;
        &.x-item-pressed, &.x-item-selected {
            color: #ff9a00;
            background-color: #ff9a00;
            -webkit-transition: background-color, color 0ms linear;
            -webkit-transition-delay: 0s;
        }
    }
    And I have tried too like this:
    Code:
    .menu-list .listitemselect {
       background: #ff9a00;
       text-shadow: #ff9a00;
    
    
    }
    And the same with every other attribute I see in my DOM in the same way
    HTML Code:
    <div class="x-list-item-first x-list-header-wrap x-list-item x-stretched x-list-item-tpl x-list-item-relative x-item-selected" !important;">
    I achive to change attributes like
    -webkit-box-shadow: inset -15px 0px 30px -15px rgba(0,0,0,1);
    or
    background: #ff9a00;

    But im still unable to change "x-item-pressed, &.x-item-selected" or something like that.

    So call u tell me where am I lost?
    Thanks

Thread Participants: 2