Results 1 to 5 of 5

Thread: Treelist listener itemclick over selectionchange

  1. #1

    Default Answered: Treelist listener itemclick over selectionchange

    Hi guys,
    I have a little bit of trouble with the itemclick listener in my treelist. If I choose to listen for the selectionchange event, everything works fine, but when i change the listener to itemclick, nothing seems to happen.
    My view looks like this:

    Code:
    Ext.define('app.view.tree.TheTreePanel',{
            extend: 'Ext.list.Tree',
            xtype: 'theTreePanel',
            controller: 'theTreePanel',
            listeners:{
                selectionchange: 'test'
            },
            store:{ 
                root: {
                    expanded: true,
                    text: 'Main Menu'
                },
                proxy: {
                         type: 'ajax',
                         method: 'POST',
                         url: 'index.php/etc',
                         reader: {
                             type: 'json',
                             idProperty: 'id',
                             messageProperty: 'msg'
                         }
                }
            }
    });
    and my ViewController:

    Code:
    Ext.define('app.view.tree.TheTreePanelController', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.theTreePanel',
               test: function(){
                console.log(' in test');
            }
            
        
    });
    Please help.
    Thank you

  2. Hi--

    My apologies, just realized you were using a treelist, not a treepanel. However, the itemclick event still seems to work as expected: https://fiddle.sencha.com/#fiddle/vhr

    Can you put together a Fiddle that demonstrates the issue in your code? https://fiddle.sencha.com

    Thanks!
    Joel

  3. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi--

    It seems to be working for me: https://fiddle.sencha.com/#fiddle/vf9

    Can you share an example of the issue you're experiencing?

    Thanks
    Joel

  4. #3

    Default

    Hi Joel,Thanks for your quick answer. I saw the fiddle and i'm even more confused . I really don't know what am i doing wrong.
    So, my app, after login, load the main panel:
    Code:
    Ext.define('app.view.main.Main', {
        extend: 'Ext.panel.Panel',
        xtype: 'app-main',
        iconCls: 'fa fa-gears',
        layout: 'border',
        id:'app-main',
    
    
        requires: [
            'Ext.plugin.Viewport',
            'Ext.window.MessageBox',
            
            'app.view.main.MainController',
            'app.view.main.TheTabPanel',
            'app.view.tree.TheTreePanel',
            'app.view.tree.TheTreePanelController'
        ],
    
    
    
    
        controller: 'main',
        plugins: 'viewport',
        
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
    
    
                    header: {
                        height:70,
                        title: Welcome',
                        items: [{
                            xtype:'button',
                            text: 'Logout',
                            margin: '10 0',
                            iconCls: 'fa fa-power-off',
                            handler: 'onLogoutButton'
                        }]
                    },
                
                    items: [{
                        region: 'west',
                        bodyPadding: 5,
                        width: 220,
                        split: true,
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        border: false,
                        scrollable: 'y',
                        items: [{
                            xtype: 'theTreePanel'
                        }]
                    },{
                        region: 'center',
                        bodyPadding: 5,
                        items: [{
                            xtype: 'theTabPanel'
                        }]
                                
                    }]
                });
    
    
            me.callParent(arguments);
        }
    });
    The tree view:
    Code:
    Ext.define('app.view.tree.TheTreePanel',{
            extend: 'Ext.list.Tree',
            xtype: 'theTreePanel',
            controller: 'theTreePanel',
            listeners:{
                itemclick: 'test'
            },
            store:{ 
                root: {
                    expanded: true,
                    text: 'Main Menu'
                },
                proxy: {
                         type: 'ajax',
                         method: 'POST',
                         url: 'index.php/etc',
                         reader: {
                             type: 'json',
                             idProperty: 'id',
                             messageProperty: 'msg'
                         }
                }
            }
    });
    and the viewcontroller:
    Code:
    Ext.define('app.view.tree.TheTreePanelController', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.theTreePanel',
               test: function(){
                console.log(' in test');
            }
            
        
    });
    The json respone:
    Code:
    {'children':[{ text: 'Lists', expanded:true,leaf:false, iconCls:'x-fa fa-home','children': [{text: 'First list',id: 'l1',leaf:true, iconCls:'x-fa fa-briefcase'},{text: 'Second list',id: 'l2',leaf:true, iconCls:'x-fa fa-male'}]},{ text: 'Settings', expanded:true,leaf:false, iconCls:'x-fa fa-wrench','children': []}]}

    If my listener is 'selectionchange' everything works fine, but if I'm changing it to 'itemclick', nothing happens.
    Thank you, again
    P

  5. #4
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi--

    My apologies, just realized you were using a treelist, not a treepanel. However, the itemclick event still seems to work as expected: https://fiddle.sencha.com/#fiddle/vhr

    Can you put together a Fiddle that demonstrates the issue in your code? https://fiddle.sencha.com

    Thanks!
    Joel

  6. #5
    Sencha Premium User jvandemerwe's Avatar
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    261
    Answers
    7

    Default Listener on the Ext.list.Tree

    Code:
    initComponent: function (arguments) {
        var me = this;
    
        Ext.apply(me, {
            items: [{
                xtype: 'treelist',
                ui: 'nav',
                store: Ext.StoreManager.lookup('Index'),
                scope: me,
                expanderFirst: false,
                expanderOnly: false,
                hideIconCls: true,
                listeners: {
                    selectionchange: onSelectionChange
                } 
            }]
        });
    
        me.callParent(arguments);
    
        function onSelectionChange(tree, node, opts) {
            if (node.get('type') === 'P') {
                me.fireEvent('IndexNodeClicked', me, tree, node);
            }
        }
    
    },

Similar Threads

  1. Replies: 1
    Last Post: 6 Jul 2015, 2:47 PM
  2. problem in handling selectionchange and itemclick events
    By tangalla in forum Ext: Discussion
    Replies: 1
    Last Post: 9 Oct 2012, 1:24 PM
  3. Replies: 3
    Last Post: 13 Mar 2012, 5:43 AM
  4. listener itemclick in chart inside Ext.Window
    By bdom in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 11 Mar 2010, 5:01 AM

Tags for this Thread

Posting Permissions

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