Hybrid View

  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

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