I have created an instance class from Ext.Component
to use the ul tag.
{
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();
精彩评论