So I have my widget select widget that when an icon is clicked, it will display the widget that corresponds to that icon. I ran into an issue where I needed to have the widget select hide when it is no longer in focus. So to remedy this I implemented on property for widgets and used the onBlur event. However as soon as I did this the icons lost their functionality. Is the on property completely overwriting the click actions of the icons? Below is the code I have, thank you!
widget_select = webix.ui({
view:"window",
id:"widget_select",
height:200, width:350,
left:25, top:150,
head:{
view: "toolbar", margin:-4, cols:[
{view:"label", label:"Widget Select"},
{view: "icon", icon: "times-circle", css:"alter",
click:"$$('widget_select').hide();"}
]
},
body:{
cols:[
{
view:"icon", icon:"calendar", id:"icon_cal", width:50, height:50,
click:function(){
makeWidget('calendar');
$$('icon_cal').disable();
$$('widget_select').hide();
}
},
{
view: "icon", icon: "edit", id: "icon_sticky" ,width:50, height:50,
click:function(){
makeWidget('sticky');
$$('icon_sticky').disable();
$$('widget_select').hide();
}
},
{
view: "icon", icon: "picture-o", id: "icon_pic", width:50, height:50,
click:function(){
makeWidget('picture');
$$('icon_pic').disable();
$$('widget_select').hide();
}
},
{
view: "icon", icon: "envelope", id:"icon_notify", width:50, height:50,
click:function(){
makeWidget('notification');
$$('icon_notify').disable();
$$('widget_select').hide();
}
}
]
},
on: {
'onBlur': function(){
this.hide();
}
}
});