Results 1 to 8 of 8

Thread: Changing the CSS for an item in the list based on a condition

  1. #1
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    245
    Answers
    6
    Vote Rating
    2
      0  

    Default Answered: Changing the CSS for an item in the list based on a condition

    Hi Sencha People

    I'm using ST2's MVC framework. So far ...so good but I'm hoping someone could direct me in the right direction here. I have a JSON populated list which, based on the value of a particular field, dictates what that item's background color should be in my list. In short...how does one check for the fields value and alter the css for it BEFORE rendering the list?

    Any keywords or links sending me to the right direction would greatly be appreciated.

    Regards
    R

  2. try use the dataview,
    below is the index.js
    Code:
    Ext.setup({
        onReady: function() {
            Ext.Viewport.add({
                xtype: 'dataview',
                cls: 'testview',
                fullscreen: true,
                itemTpl: new Ext.XTemplate(
                    //define style based on the values.score
                    '{% var bStyle = values.score > 0 ? "background-color: green" : "background-color: transparent"; %}',
                    '<div style="{[bStyle]}">{[this.checkScore(values.score, values)]}</div>',
                    {
                        checkScore: function(value, values) {
                            //handle value here
                            return value;
                        }
                    }
                ),
                data: [
                    { score: -2 },
                    { score: -1 },
                    { score: 0 },
                    { score: 1 },
                    { score: 2 }
                ],
                listeners: {
                    itemtap: function(dataView, index, target, record, e, eOpts) {
                        Ext.Msg.alert('Msg', 'the selected score is: '+record.get('score'), Ext.emptyFn);
                    }
                }
            });
        }
    });
    below is part of the index.html
    HTML Code:
    <style type="text/css">        
    .testview .x-dataview-item {            border-bottom : 1px solid #cccbcb;        }        
    .testview .x-item-selected {           background-color: #006bb6;           background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #50b7ff), color-stop(2%, #0080da), color-stop(100%, #005692) );            background-image: -webkit-linear-gradient(#50b7ff, #0080da 2%, #005692);            
    background-image: linear-gradient(#50b7ff, #0080da 2%, #005692);            
    color: #fff;;            
    text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;            
    border-color: #103656;        }    
    </style>
    this is what I get:
    Attachment 35087
    hope this can help you~

  3. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    ShenZhen, China
    Posts
    52
    Answers
    11
    Vote Rating
    3
      0  

    Default

    use the Ext.XTemplate's member functions, the codes below is from the sencha
    Code:
    var tpl = new Ext.XTemplate(
        		    '<p>Name: {name}</p>',
        		    '<p>Kids: ',
        		    '<tpl for="kids">',
        		        '<tpl if="this.isGirl(name)">',
        		            '<p>Girl: {name} - {age}</p>',
        		        '<tpl else>',
        		            '<p>Boy: {name} - {age}</p>',
        		        '</tpl>',
        		        '<tpl if="this.isBaby(age)">',
        		            '<p>{name} is a baby!</p>',
        		        '</tpl>',
        		    '</tpl></p>',
        		    {
        		        // XTemplate configuration:
        		        disableFormats: true,
        		        // member functions:
        		        isGirl: function(name){
        		           return name == 'Sara Grace';
        		        },
        		        isBaby: function(age){
        		           return age < 1;
        		        }
        		    }
        	);

  4. #3
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    245
    Answers
    6
    Vote Rating
    2
      0  

    Default

    Hi AMliaoyiwu,

    Thanks for the response, I've already read that documentation. The problem with that is that the entire item or row in the list is not fully covered (should you wish to change the background that is given a particular criteria).

    There's mention of the same issue here in this post.

    The following code snippet produces what's been the attached image.

    Code:
    var tpl = new Ext.XTemplate(
    
        '<tpl if="score_1 &gt;= 1  &amp; score_1 &lt; 4.8"><div class="x-list-normal, x-list-item,x-item-selected, x-list-item-label" style="background-color:red;">{score_1} </div></tpl>'
    
    );
    Screen shot 2012-05-10 at 11.42.24 AM.png

    Note that the red coloration still has a border which is not what I'm looking for. The entire row should be colored.

    Regards
    R

  5. #4
    Sencha User
    Join Date
    Apr 2012
    Location
    ShenZhen, China
    Posts
    52
    Answers
    11
    Vote Rating
    3
      0  

    Default

    try use the dataview,
    below is the index.js
    Code:
    Ext.setup({
        onReady: function() {
            Ext.Viewport.add({
                xtype: 'dataview',
                cls: 'testview',
                fullscreen: true,
                itemTpl: new Ext.XTemplate(
                    //define style based on the values.score
                    '{% var bStyle = values.score > 0 ? "background-color: green" : "background-color: transparent"; %}',
                    '<div style="{[bStyle]}">{[this.checkScore(values.score, values)]}</div>',
                    {
                        checkScore: function(value, values) {
                            //handle value here
                            return value;
                        }
                    }
                ),
                data: [
                    { score: -2 },
                    { score: -1 },
                    { score: 0 },
                    { score: 1 },
                    { score: 2 }
                ],
                listeners: {
                    itemtap: function(dataView, index, target, record, e, eOpts) {
                        Ext.Msg.alert('Msg', 'the selected score is: '+record.get('score'), Ext.emptyFn);
                    }
                }
            });
        }
    });
    below is part of the index.html
    HTML Code:
    <style type="text/css">        
    .testview .x-dataview-item {            border-bottom : 1px solid #cccbcb;        }        
    .testview .x-item-selected {           background-color: #006bb6;           background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #50b7ff), color-stop(2%, #0080da), color-stop(100%, #005692) );            background-image: -webkit-linear-gradient(#50b7ff, #0080da 2%, #005692);            
    background-image: linear-gradient(#50b7ff, #0080da 2%, #005692);            
    color: #fff;;            
    text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0;            
    border-color: #103656;        }    
    </style>
    this is what I get:
    未命名.PNG
    hope this can help you~

  6. #5
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    245
    Answers
    6
    Vote Rating
    2
      0  

    Default

    Hi liaoyiwu

    Thanks for this, will this work with ST2 though?
    I noticed you're using onReady (ST1?)

    Thx
    R

  7. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    ShenZhen, China
    Posts
    52
    Answers
    11
    Vote Rating
    3
      0  

    Default

    Just a example, I write these codes with the sencha touch 2.0.1, this has been test already.

  8. #7
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    245
    Answers
    6
    Vote Rating
    2
      0  

    Default Nice one ...

    Hi Liaoyiwu,

    Thanks for your reply and sorry about the late response. I got it working 100%. Below is the code for anyone looking to do the same. The important parts in bold in the view. Note that "avoid", "ho-hum", "ok", "good", "excellent" & "default" are the name given to my style in my css file...something like ...

    .default {
    background-color: transparent;
    }

    Code:
    var tpl = new Ext.XTemplate(
    
    
        '{% var bClass; %}',
        '{% var score = values.score_1; %}',
    
    
        // Avoid - dark grey
        '{% if ((score > 0) && (score < 4.8)) %}',
        '{% { bClass = "avoid" } %}',
    
    
        // Ho-Hum - white'sh
        '{% else if ((score >= 4.8) && (score < 5.8)) %}',
        '{% { bClass = "ho-hum" } %}',
    
    
        // Ok - yellow
        '{% else if ((score >= 5.8) && (score < 6.8)) %}',
        '{% { bClass = "ok" } %}',
    
    
        // Good - orange
        '{% else if ((score >= 6.8) && (score < 7.8)) %}',
        '{% { bClass = "good" } %}',
    
    
        // Excellent - red
        '{% else if ((score >= 7.8) && (score <= 10)) %}',
        '{% { bClass = "excellent" } %}',
    
    
        // Unknown/default - transparent
        '{% else %}',
        '{% { bClass = "default" } %}',
    
    
    
    
        '<div class="{[bClass]}"><h1>{begin_time}</h1><h2>{title:ellipsis(20)} [{channel_short_name}]</h2>{score_1}<br><p>{summary:ellipsis(35)}</p></div>'
    
    
    );
    
    Ext.define('Next24.view.MyView', {
       extend: 'Ext.Panel',
        xtype: 'movies',
    
    
        config: {
    
    
            title: 'Listing',
            layout: 'fit',
    
    
            items: [
                {
                    xtype: 'dataview',
                    store: 'MyStore',
                    itemTpl: tpl,
                    itemCls: 'list-entry'
                }
            ]
        }
    });
    Take care ....
    Riyaad

  9. #8
    Sencha User
    Join Date
    Aug 2017
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Nice Solution Riyaad !
    Thank you very much

Tags for this Thread

Posting Permissions

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