Results 1 to 7 of 7

Thread: How to add arrow to nestedList

  1. #1
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    134
    Answers
    4
    Vote Rating
    4
      0  

    Default Answered: How to add arrow to nestedList

    How to add arrow to nestedList ???

  2. 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(...);
    }

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Where do you want this arrow to be? On a non-leaf list item?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    134
    Answers
    4
    Vote Rating
    4
      0  

    Default

    yes

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

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    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(...);
    }
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    134
    Answers
    4
    Vote Rating
    4
      0  

    Default

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

  7. #6
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Fantastic!
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  8. #7
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    134
    Answers
    4
    Vote Rating
    4
      0  

    Default

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

Posting Permissions

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