Question

I have created an instance class from Ext.Component to use the ul tag.
here the the demo
and this is how i use my contentMenu :

{
    xtype : "contentmenu"
    title : "Data Master",
    items : [{
        id : "action-siswa",
        iconCls : "icon-monitor",
        text : "Siswa",
        handler : function(){
            console.info("aaaa");
        }
    },{
        id : "action-sekolah",
        iconCls : "icon-monitor",
        text : "Sekolah",
        handler : function(){
            console.info("aaaa");
        }
    }]
}]

how to execute my handler ????
i want to execute my handler inside method doAction..

Answer 1

Here is your situation your contentmenu widget creating their items as dom and their handler property can’t been seen as the items is deleted in the initComponent section.

I know why you need to do this because you need a clean template render for panel item. So the solution for this problem is by using an explicit contentmenu items property that can’t be interference by rendering process in initComponent but can be accessed in doAction.

See code bellow:

Ext.onReady(function() {

    Ext.define("Ext.ux.ContentMenu", {
        extend: "Ext.panel.Panel",
        alias: "widget.contentmenu",

        tpl: new Ext.XTemplate('<tpl for=".">', '<li style="margin: 3px 3px 3px 3px;">', '<img src="', Ext.BLANK_IMAGE_URL, '" class="{iconCls}" style="height:16px;margin-bottom:2px;margin-right:7px;vertical-align:middle;width:16px;"/>', '<a id="{id}" href="#" style="color:#3764A0;font-size:11px;text-decoration:none;">{text}</a>', '</li>', '</tpl>'),

        initComponent: function() {
            var c = this;
            var items = c.items; //temp items var
            delete c.items;  //need to do this to get clean panel display
            c.data = items;
            this.callParent();
            c.menus = items; //items is stored as menus property for the contentmenu
        },
        afterRender: function() {
            var m = this;
            m.callParent();
            b = m.body;
            b.on('mousedown', this.doAction, this, {
                delegate : "a",
                preventDefault: true,
                stopEvent: true
            });
        },
        doAction: function(a, b) {
            //Do the items handler
            Ext.each(this.menus, function(name, idx, arr) {
                if(arr[idx].id === b.id) { //found matched menu items
                    arr[idx].handler(); //do the handler
                    return false; //break here
                }
            });
        }
    });

    Ext.create("Ext.Window", {
        title: "aaa",
        width: 200,
        height: 150,
        layout: "fit",
        defaults: {
            xtype: "contentmenu"
        },
        items: [{
            title: "Data Master",
            items: [{
                id: "action-siswa",
                iconCls: "icon-monitor",
                text: "Siswa",
                handler: function() {
                    Ext.Msg.alert("Action Siswa","Handler action-siswa");
                }},
            {
                id: "action-sekolah",
                iconCls: "icon-monitor",
                text: "Sekolah",
                handler: function() {
                    Ext.Msg.alert("Action Sekolah","Handler action-sekolah");
                }
            }]
        }]
    }).show();
});

Maybe this help you