开发者

how to trigger my handler, from a particular method?

开发者 https://www.devze.com 2023-04-05 21:04 出处:网络
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 :

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 handle开发者_如何学Cr ???? i want to execute my handler inside method doAction..


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


You mean...

Ext.getCmp('action-sekolah').handler();

0

精彩评论

暂无评论...
验证码 换一张
取 消