Question

我已经从Ext.Component创建了一个实例类来使用ul标签这里是demo 这就是我使用我的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");
        }
    }]
}]

如何执行我的处理程序???? 我想在方法doAction ..

中执行我的处理程序

Answer 1

这是您的情况，您的contentmenu小部件创建他们的项目为dom，并且他们的处理程序属性无法被看到，因为这些项目在initComponent部分中被删除。

我知道为什么你需要这样做，因为你需要一个干净的模板渲染面板项。所以这个问题的解决方案是使用一个显式的contentmenu items属性，它不能被initComponent中的渲染过程干扰，但可以在doAction中访问。

见下面的代码：

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();
});

也许这有助于你

Answer 2

你的意思是......

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

如何从特定方法触发我的处理程序？

2 个答案: