动态创建popMenu需要先引用组件的js文件如下:
var popMenu = require("$UI/system/components/justep/popMenu/popMenu");
然后就可以设置相关的参数new popMenu,但是popMenu是组合组件里面的菜单项其实是menu所以创建菜单项时要获取到menu调用相关的方法创建
menu动态创建菜单项时其实是动态创建button,需要设置点击事件要通过on的方式给按钮绑定,或者直接在创建项中设置,完整的实现如下:
Model.prototype.button18Click = function(event) { var parentNode = this.getElementByXid("top1"); var option = { parentNode : parentNode, xid : 'popMenu1', class : 'x-popMenu', anchor : 'button18', dismissible : true, autoHidable : true, opacity : '0.1' }; var popMenu1 = new popMenu(option);//动态创建popMenu /*给popMenu动态添加菜单*/ var menu = popMenu1.getInnerMenu().addItem({ label : "Item", xid : "buttonMenu1" }); /*通过on给动态添加的菜单动态绑定click事件*/ this.comp("buttonMenu1").on("onClick", function(event) { alert(event.source.get('label')); }); popMenu1.show();//显示popMenu };
直接在创建项中设置点击事件有两中方式
方式一:直接设置执行代码
var menu = popMenu1.getInnerMenu().addItem({ label : "Item", xid : "buttonMenu1", 'onClick' : function(event){ alert(event.source.get('label')); } });
方式二:调用model中定义的js函数
model中的函数定义如下:
Model.prototype.test1 = function(event){ alert(event.source.get('label')); }
给popMenu动态添加菜单如下:
var menu = popMenu1.getInnerMenu().addItem({ label : "Item", xid : "buttonMenu1", 'onClick' : this.test1 });
评一波