Results 1 to 5 of 5

Thread: Extjs 6 + Tree List add click event

  1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    21

    Default Answered: Extjs 6 + Tree List add click event

    Hi,

    I'm using this example for my applications :

    http://examples.sencha.com/extjs/6.0...ink/#tree-list

    I would like to know where I've to put my listener to detect the click on an item in the tree.

    Thx you,

  2. Not sure what you are attempting here but:
    Code:
    Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',
        width: 200,
        height: 200,
        store: store,
        rootVisible: false,
        renderTo: Ext.getBody(),
        listeners:
            select: 'treeNodeSelect'
        }
    });
    In your viewcontroller:
    Code:
    treeNodeSelect: function(tree,record,ndx,opts){
        //Do Something Here With The Selected Node
    }

  3. #2
    Sencha User
    Join Date
    May 2010
    Posts
    21

    Default

    In the viewModel, I can't find where I can detect a click on a leaf of the tree node :



    Code:
    Ext.define('KitchenSink.view.tree.TreeListModel', {
        extend: 'Ext.app.ViewModel',
    
    
        alias: 'viewmodel.tree-list',
    
    
        formulas: {
            selectionText: function(get) {
                var selection = get('treelist.selection'),
                    path;
                if (selection) {
                    path = selection.getPath('text');
                    path = path.replace(/^\/Root/, '');
                    return 'Selected: ' + path;
                } else {
                    return 'No node selected';
                }
            }
        },
    
    
        stores: {
            navItems: {
                type: 'tree',
                root: {
                    expanded: true,
                    children: [{
                        text: 'Home',
                        iconCls: 'x-fa fa-home',
                        children: [{
                            text: 'Messages',
                            iconCls: 'x-fa fa-inbox',
                            leaf: true
                        },{
                            text: 'Archive',
                            iconCls: 'x-fa fa-database',
                            children: [{
                                text: 'First',
                                iconCls: 'x-fa fa-sliders',
                                leaf: true
                            },{
                                text: 'No Icon',
                                iconCls: null,
                                leaf: true
                            }]
                        },{
                            text: 'Music',
                            iconCls: 'x-fa fa-music',
                            leaf: true
                        },{
                            text: 'Video',
                            iconCls: 'x-fa fa-film',
                            leaf: true
                        }]
                    },{
                        text: 'Users',
                        iconCls: 'x-fa fa-user',
                        children: [{
                            text: 'Tagged',
                            iconCls: 'x-fa fa-tag',
                            leaf: true
                        },{
                            text: 'Inactive',
                            iconCls: 'x-fa fa-trash',
                            leaf: true
                        }]
                    },{
                        text: 'Groups',
                        iconCls: 'x-fa fa-group',
                        leaf: true
                    },{
                        text: 'Settings',
                        iconCls: 'x-fa fa-wrench',
                        children: [{
                            text: 'Sharing',
                            iconCls: 'x-fa fa-share-alt',
                            leaf: true
                        },{
                            text: 'Notifications',
                            iconCls: 'x-fa fa-flag',
                            leaf: true
                        },{
                            text: 'Network',
                            iconCls: 'x-fa fa-signal',
                            leaf: true
                        }]
                    }]
                }
            }
        }
    });


  4. #3
    Sencha User
    Join Date
    May 2009
    Posts
    300
    Answers
    6

    Default

    I didn't see the code for the treepanel but I would think that on the panel you would need to set a listener on the "select" event.

  5. #4
    Sencha User
    Join Date
    May 2010
    Posts
    21

    Default

    Thx, but I don't see where is the tree list component in that :


    Code:
    {
            region:'west', 
           width:250,
            split:true,
            reference:'treelistContainer', 
           layout:{            
               type:'vbox',
                align:'stretch'},
            border:false,
            scrollable:'y',
            items:[{            xtype:'treelist',            reference:'treelist',            bind:'{navItems}'}]   
     }
    

  6. #5
    Sencha User
    Join Date
    May 2009
    Posts
    300
    Answers
    6

    Default

    Not sure what you are attempting here but:
    Code:
    Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',
        width: 200,
        height: 200,
        store: store,
        rootVisible: false,
        renderTo: Ext.getBody(),
        listeners:
            select: 'treeNodeSelect'
        }
    });
    In your viewcontroller:
    Code:
    treeNodeSelect: function(tree,record,ndx,opts){
        //Do Something Here With The Selected Node
    }

Similar Threads

  1. Extjs dataview click and double click event
    By nissagala in forum Ext: Q&A
    Replies: 5
    Last Post: 12 Apr 2015, 7:10 AM
  2. Click event on tree...
    By oblomov77 in forum Sencha GXT Discussion
    Replies: 2
    Last Post: 18 Jun 2012, 6:48 PM
  3. Extjs tree :Enableing click and double click event togrther
    By 2manish3 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 30 Apr 2012, 7:32 PM
  4. Click event on Tree Panel +/-
    By catapult in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 25 May 2010, 5:22 AM

Posting Permissions

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