1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    25
    Answers
    3
    Vote Rating
    0
    echobloom is on a distinguished road

      0  

    Default Answered: Coloring specific items of a nested list (with summary of past techniques)

    Answered: Coloring specific items of a nested list (with summary of past techniques)


    This question seems to have been going around the forum for a while now (e.g. http://bit.ly/KcBmab - http://bit.ly/JrMhpN - http://bit.ly/JV3Rbn), so I thought I'd bring it back up and see if anybody had come up with any new solutions.

    I want to color the background of specific cells of a nested list based on their content. So a cell with the content 'Apple' has a red background, and a cell with the content 'Eggplant' has a purple background. The clear thing to look at would be the itemTpl - like:

    Code:
        getItemTextTpl: function() {
            var tplConstructor = '<div class="{text}">{text}</div>';
            return tplConstructor;
        }
    but this selector only provides access to the text itself, and not the actual cell (that's one level up). A gentleman came up with a solution (at http://bit.ly/kOjZWV) for 1.x within the data store of the object that targets the level above, where he does something like this:

    Code:
    //note: myList is a reference to a list element from view.
    
    
    app.stores.myList = new Ext.data.Store({
        model: 'app.models.MyInfo',
        listeners: {
            load: {
                fn: function () {
                    var itemList = myList.el.dom.getElementsByClassName("x-list-item")
                    for (var i = 0; i < itemList.length; i++) {
                        var severeItem = itemList[i].getElementsByClassName("severeItem");
                        if (severeItem.length > 0) {
                            itemList[i].className += "severeItem "
                        } else {
                            var mildItem = itemList[i].getElementsByClassName("mildItem");
                            if (mildItem.length > 0) {
                                itemList[i].className += "mildItem "
                            }
                        }
                    }
                }
            }
        }
    });
    And another gentleman offered a solution that utilized the nth-child pseudo-class (http://bit.ly/IFFuj0) which works, but assumes your data is ordered:

    Code:
    .myMenu div.x-list-item:nth-child(1){    background-color: #ecda0c;}
    .myMenu div.x-list-item:nth-child(2){    background-color: #cfcaca;}
    .myMenu div.x-list-item:nth-child(3){    background-color: #d25768;}
    .myMenu div.x-list-item:nth-child(4){    background-color: #71b5bc;}
    Does anybody have a reliable solution for this?

    Many thanks -
    Kyle

  2. The previous methods listed mixed display elements with data tracking, and didn't work when the list refreshed. My solution is as follows:

    Code:
    /**
     * @class sandbox.view.ListPage
     * @extends Ext.Container
     * Description
     */
    Ext.define('sandbox.view.sports.FruitList', {
        extend: 'Ext.NestedList',
        xtype: 'fruitList',
        id: 'fruitList',
        
        requires: [
            'sandbox.view.fruit.FruitContainer'
        ],
        
        config: {
            title: 'Fruit',
            iconCls: 'star',
            store: 'FruitStore',
            cls: 'fruitElements',
            listeners: {
                load: function() {
                    this.refreshStyles();
                },
                back: function() {
                    this.refreshStyles();
                },
            }
        },
        
        refreshStyles: function() {
            // Workaround required to get the background color of cells
            var itemList = this.element.dom.getElementsByClassName("x-list-item");
    
    
            for(var i = 0; i < itemList.length; i++) {
                if(itemList[i].getElementsByClassName('Apple').length) {
                    itemList[i].className += " appleListCell";
                } else if(itemList[i].getElementsByClassName('Eggplant').length) {
                    itemList[i].className += " eggplantListCell";
                }
            }            
        },
        
        getItemTextTpl: function() {
            var tplConstructor = '<div class="{text}">{text}</div>';
            return tplConstructor;
        }
    });

  3. #2
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    25
    Answers
    3
    Vote Rating
    0
    echobloom is on a distinguished road

      0  

    Default


    The previous methods listed mixed display elements with data tracking, and didn't work when the list refreshed. My solution is as follows:

    Code:
    /**
     * @class sandbox.view.ListPage
     * @extends Ext.Container
     * Description
     */
    Ext.define('sandbox.view.sports.FruitList', {
        extend: 'Ext.NestedList',
        xtype: 'fruitList',
        id: 'fruitList',
        
        requires: [
            'sandbox.view.fruit.FruitContainer'
        ],
        
        config: {
            title: 'Fruit',
            iconCls: 'star',
            store: 'FruitStore',
            cls: 'fruitElements',
            listeners: {
                load: function() {
                    this.refreshStyles();
                },
                back: function() {
                    this.refreshStyles();
                },
            }
        },
        
        refreshStyles: function() {
            // Workaround required to get the background color of cells
            var itemList = this.element.dom.getElementsByClassName("x-list-item");
    
    
            for(var i = 0; i < itemList.length; i++) {
                if(itemList[i].getElementsByClassName('Apple').length) {
                    itemList[i].className += " appleListCell";
                } else if(itemList[i].getElementsByClassName('Eggplant').length) {
                    itemList[i].className += " eggplantListCell";
                }
            }            
        },
        
        getItemTextTpl: function() {
            var tplConstructor = '<div class="{text}">{text}</div>';
            return tplConstructor;
        }
    });

Tags for this Thread