YUI3 custom view module do not calls showPanel() function whn the user clicks to the Y.SpHeader (view) should call showPanel event handler.
the code Does not throw any error in console it simply do not work. and not logging in console that the button is clicked.
YUI.add('sp-header-section', function(Y){
Y.SpHeader = Y.Base.create('sp-header-section', Y.View, [], {
events: {
'#sign-up': {'click': "showPanel"}
},
initializer: function(config){
this._initPanel();
},
render: function(){
new Y.SpDropdownMenu({
contentBox: "#top_menu",
descriptions: true
}).render();
},
// Private Methods
_initPanel: function(){
var okButton = this.okBotton;
var cancelButton = this.cancelButton;
this.panel = new Y.Panel({
width: 300,
centered: true,
headerContent: 'Sign Up To Recieve a Book',
bodyContent: 'CAUTION: Watch out for random panels.',
zIndex: 999,
modal: true,
});
},
showPanel: function(){
Y.log('the button is clicked');
this.panel.reder();
},
// Panel Buttons Configurations
okButton: {
value: 'ok',
section: Y.WidgetStdMod.FOOTER,
action: function (ev) {
ev.preventDefault();
this.hide();
}
},
cancelButton: {
value: 'cancel',
section: Y.WidgetStdMod.FOOTER,
action: function (ev) {
ev.preventDefault();
this.hide();
}
}
}, {
ATTRS:{
}
});
},'1.0', {requires: ['sp-dropdown-menu', 'panel', 'escape', 'view']});
YUI().use('sp-header-section', function(Y){
var header = new Y.SpHeader({}).render();
});