Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

Threaded 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;
        }
    });

Tags for this Thread