1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    73
    Vote Rating
    -1
    PhilChill is an unknown quantity at this point

      0  

    Default Answered: different colors for list items

    Answered: different colors for list items


    Hey,

    i have a list where i add items in. There is a difference in the items one are notes and the other are messages. I want to show the notes with a yellow background in the list. At the moment i'm so far that i can see which list item is a node or a message. To see on this screenshot
    NoteMessageList.jpg

    my model looks so
    Code:
    Ext.define('MobileLogin.model.Message', {    extend: 'Ext.data.Model',
    
    
        config: {
    	// the fields in the model 
            fields: [
                { name: 'body', type: 'string'},
    	    { name: 'sender', type: 'auto'},
    	    { name: 'name', type: 'string'},
    	    { name: 'type', type: 'string'},
            ]
        }
    });
    and the item template in the list looks so itemTpl: '<strong>{type} {sender.name} : {body}</strong>',
    What is the best way to change the list item background?

  2. of course if the property {type} can be email, phone and car


    HTML Code:
    itemTpl: '<div class="{type}"><strong>{type} {sender.name} : {body}</strong></div>',
    then add in you css

    Code:
    .email {background-color: red;}
    .phone {background-color: blue;}
    .car {background-color: white;}

  3. #2
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    690
    Answers
    21
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    use {type} to add css classes to the list

    Code:
    itemTpl: '<div class="{type}">{type} {sender.name} : {body}</div>',
    then you can style your type classes with css

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    73
    Vote Rating
    -1
    PhilChill is an unknown quantity at this point

      0  

    Default


    Thank you i will give it a try

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    73
    Vote Rating
    -1
    PhilChill is an unknown quantity at this point

      0  

    Default


    I have still some problems. I created my own css file called main.css. I add this file to the index.html and in the list i declare the file as the cls.

    Code:
    itemTpl: '<div class="{type}"><strong>{type} {sender.name} : {body}</strong></div>',	store: 'messages',
    	pressedCls : '',
    	selectedCls : '',
    	cls : 'touch/resources/css/main.css',
    In my main.css file i wanted to change the background-color to red but there are no changes in the view
    Code:
    type {    background-color: red;
    }
    I think I'm missing something but i don't know what

  6. #5
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    690
    Answers
    21
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    your css should be

    Code:
    .type {
    
    background-color: red;}
    make sure in your chrome developer tools that your css selector is strong enough or is overritten by a stronger one

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    73
    Vote Rating
    -1
    PhilChill is an unknown quantity at this point

      0  

    Default


    yes thank you is working. but is there a possibilty to write in the css file if the type is an email make it white else if the type is a note make it yellow?

  8. #7
    Sencha - Training Team mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    690
    Answers
    21
    Vote Rating
    12
    mrsunshine will become famous soon enough

      0  

    Default


    of course if the property {type} can be email, phone and car


    HTML Code:
    itemTpl: '<div class="{type}"><strong>{type} {sender.name} : {body}</strong></div>',
    then add in you css

    Code:
    .email {background-color: red;}
    .phone {background-color: blue;}
    .car {background-color: white;}

  9. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    73
    Vote Rating
    -1
    PhilChill is an unknown quantity at this point

      0  

    Default


    Great was working direct

Thread Participants: 1

Tags for this Thread