How to add arrow to nestedList

**demon222** · 2 Feb 2012 4:57 AM

How to add arrow to nestedList ???

mitchellsimoens

You can override the getItemTextTpl method to provide a string. This string will later be added to the itemTpl of the lists. Hopefully you can simply add a new element and float it to the right and style it:

Code:

getItemTextTpl : function(node) {
    return '{' + this.displayField + '}<div class="list-arrow"></div>';
}

Code:

.list-arrow {
    float : right;
    height : 1em;
    width : 1em;
    background-image: url(...);
}

**mitchellsimoens** · 2 Feb 2012 12:48 PM

Where do you want this arrow to be? On a non-leaf list item?

**demon222** · 3 Feb 2012 3:03 AM

yes

I on the right arrow to make it (non-leaf)

**mitchellsimoens** · 3 Feb 2012 5:52 AM

You can override the getItemTextTpl method to provide a string. This string will later be added to the itemTpl of the lists. Hopefully you can simply add a new element and float it to the right and style it:

Code:

getItemTextTpl : function(node) {
    return '{' + this.displayField + '}<div class="list-arrow"></div>';
}

Code:

.list-arrow {
    float : right;
    height : 1em;
    width : 1em;
    background-image: url(...);
}

**demon222** · 3 Feb 2012 6:44 AM

ok work ...
thx

PHP Code:


Ext.require(

    [

    'Ext.data.Model', 

    'Ext.data.TreeStore',

    'Ext.app.Application',

    'Ext.field.TextArea',

    'Ext.dataview.NestedList'

    ],

    function() {    

        Ext.override(Ext.dataview.NestedList, {

            getItemTextTpl: function(node) {

                return '{' + this.getDisplayField() + '}<div class="list-arrow"></div>';

            }

        });

    });

**mitchellsimoens** · 3 Feb 2012 6:45 AM

Fantastic!

**demon222** · 3 Feb 2012 7:18 AM

this.getDisplayField() ---- NOT: this.displayField!
thx

How to add arrow to nestedList

Thread Tools

Search Thread

Display

Answered: How to add arrow to nestedList

Answered: How to add arrow to nestedList