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
    691
    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
    691
    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
    691
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi