I have dojo Custom widget.
I need to emit a event from the custom widget, this the code where I have added the event listener
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
isDebug : true,
packages:[
{ name:"custom",
location:"/Test/js"
}
]
};
</script>
<script src="//localhost:8080/dojo1.9.0/dojo/dojo.js"></script>
</head>
<body>
<script>
require(["custom/MyWidget","dojo/on","dojo/dom-construct","dojo/_base/window","dojo/domReady!"],function(MyWidget,on,domconstruct,window){
var mywidget = new MyWidget();
mywidget.startup();
domconstruct.place(mywidget.domNode,window.body(),"after");
on(mywidget,"customevent",function(data){
console.log( " received notification "+data );
});
});
</script>
</body>
</html>
and widget as below
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_OnDijitClickMixin",
"dijit/_TemplatedMixin",
"dojo/text!./widget.html",
"dojo/on",
"dojo/_base/lang"
], function (declare, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, template,on,lang) {
return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin], {
templateString: template,
// your custom code goes here
_onClick:function()
{
},
postCreate : function ()
{
on(this.searchtextbox,"click",lang.hitch(this,"sendEvent"));
},
sendEvent : function(event)
{
console.log( "Click event in widget "+event );
this.emit("customevent",event.x)
}
});
});
//Widget.html
<div class="${baseClass}" data-dojo-attach-point="searchtextbox">
<p>
here your widget
</p>
</div>
Problem is the line
this.emit("customevent",event.x) is throwing error
I have dojo Custom widget.
I need to emit a event from the custom widget, this the code where I have added the event listener
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
isDebug : true,
packages:[
{ name:"custom",
location:"/Test/js"
}
]
};
</script>
<script src="//localhost:8080/dojo1.9.0/dojo/dojo.js"></script>
</head>
<body>
<script>
require(["custom/MyWidget","dojo/on","dojo/dom-construct","dojo/_base/window","dojo/domReady!"],function(MyWidget,on,domconstruct,window){
var mywidget = new MyWidget();
mywidget.startup();
domconstruct.place(mywidget.domNode,window.body(),"after");
on(mywidget,"customevent",function(data){
console.log( " received notification "+data );
});
});
</script>
</body>
</html>
and widget as below
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_OnDijitClickMixin",
"dijit/_TemplatedMixin",
"dojo/text!./widget.html",
"dojo/on",
"dojo/_base/lang"
], function (declare, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, template,on,lang) {
return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin], {
templateString: template,
// your custom code goes here
_onClick:function()
{
},
postCreate : function ()
{
on(this.searchtextbox,"click",lang.hitch(this,"sendEvent"));
},
sendEvent : function(event)
{
console.log( "Click event in widget "+event );
this.emit("customevent",event.x)
}
});
});
//Widget.html
<div class="${baseClass}" data-dojo-attach-point="searchtextbox">
<p>
here your widget
</p>
</div>
Problem is the line
this.emit("customevent",event.x) is throwing error
2 Answers
Reset to default 6Widget events
You should not use dojo/on to add event handlers to widgets, it's only for DOM nodes. If you extend from dijit/_WidgetBase (like you do), then there's a method called on() which you can use, for example:
myWidget.on("customevent", function(data) {
console.log( " received notification "+data );
});
Widget extension points
I'm not sure what the emit() function does, but it seems that here's the problem. According to the docs you should write your extension points just with plain functions. For example:
postCreate : function () {
on(this.searchtextbox,"click",lang.hitch(this, "_onClick"));
},
_onClick: function(event) {
// This is where you put your code
console.log( "Click event in widget "+event );
this.onCustomEvent(event.x);
},
onCustomEvent: function() {
// This can be left empty, it will be used as the extension point
}
In this case you will bind the click event to the _onClick() function, which in turn calls onCustomEvent() with the correct arguments. This function is for public use and can be used to bind custom event handlers.
Here is the full example.
Second param of emit method should be an object, but i was not sending object to it.
sendEvent : function(event)
{
console.log( "Click event in widget "+event );
this.emit("customevent",**event**)
}