Ext. 4 menu event

[xun]

hi,

I have a menu question:

A dummy custom menu is defined as such. Inside the menu, the click event is captured and fired.

    Ext.define("Ext.csx.LeftMenu", {
            extend: "Ext.menu.Menu",
            alias: 'widget.leftmenu',
            minHeight: 200,
            width: 300,


            listeners: {
                'click': function (menu, item) {
                    console.log(item.text);
                    this.fireEvent('navclick', this, item.text);
                }
            },




            initComponent: function () {
                var me = this;
                me.items = [{
                        text:"test 1"
                    },
                {
                text: "test 2"
                   }];
                me.callParent(arguments);
                this.addEvents('navclick');


            },


        });

Then in a separate panel, I try to catch the menu click event. It fails every single time. Why?

        Ext.onReady(function () {


            Ext.create('Ext.panel.Panel', {
                margin: '0 0 10 0',
                floating: false,  // usually you want this set to True (default)
                renderTo: Ext.getBody(),


                items: [
                    {
                        xtype: 'leftmenu',
                        id: 'app-navtree',
                        listeners: {


                            'navclick': function () {
                                console.log('caught you');
                            }
                        }
                    }


                ]


            });


        });

[mitchellsimoens]

The listeners from when you create the instance is removing the listeners when you used Ext.define. I have a blog post about this particular thing: http://mitchellsimoens.com/2011/12/e...-property-bad/

[xun]

Thank you, the answer is awesome