-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi
I am trying override the default behavior of datebox to show only year. Here is my java script code
zk.afterLoad("zul.db", function () {
// Datebox Calendar Renderer
var _Cwgt = {};
zk.override(zul.db.CalendarPop.prototype, _Cwgt, {
// switch the view after redraw or open as needed
redraw : function(out) {
_Cwgt.redraw.apply(this, arguments); // call the original method
this._customChangeView();
},
open : function(silent) {
_Cwgt.open.apply(this, arguments); // call the original method
this._customChangeView();
},
_customChangeView : function() {
// cannot show month/day
if (jq(this.parent.$n()).hasClass('datebox-year-only')) {
var view = this._view;
// switch to year view as needed
if (view == 'month' || view == 'day')
this._setView("year");
} else if (jq(this.parent.$n()).hasClass('datebox-month-only')) {
// cannot show day view
// switch to month view as needed
if (this._view == 'day')
this._setView("month");
}
},
// customize the chooseDate function
_chooseDate : function(target, val) {
var view = this._view;
if (jq(this.parent.$n()).hasClass('datebox-month-only') ||
jq(this.parent.$n()).hasClass('datebox-year-only')) {
// do customize chooseDate if the parent
// (datebox)
// has specific class
var date = this.getTime(),
year = (view == 'decade' || view == 'year')
? val
: date.getFullYear(),
month = view == 'month' ? val : 0,
date = 1;
// set date value
this._setTime(year, month, 1);
if (view == 'decade') {
// switch to year view if at decade view
this._setView("year");
} else if (jq(this.parent.$n()).hasClass('datebox-month-only')
&& view == 'year') {
// switch to month view if at year view and
// the month view is allowed
this._setView("month");
} else if (jq(this.parent.$n()).hasClass('datebox-month-only')
&& view == 'month'
|| jq(this.parent.$n()).hasClass('datebox-year-only')
&& view == 'year') {
// close calendar and update value if
// already at the smallest allowed view
this.close();
this.parent.updateChange_();
}
} else {
_Cwgt._chooseDate.apply(this, arguments); // call the original method
}
}
});
});
Now i am trying to create own component by extending zk component, but i do not know how to call the override method in the java script file
package com.ecosmos.zkoss.ext;
import org.zkoss.zul.Datebox;
public class ZKYearBox extends Datebox {
private static final long serialVersionUID = 1L;
public ZKYearBox() {
setWidgetOverride("onBind", "zk.afterLoad('zul.db', function ()");
}
}
Here is my zul file
<?page title="Phone Box" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="Phone Box" border="normal">
<ZKYearBox></ZKYearBox>
</window>
</zk>
Here is addon file
<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
<addon-name>ecosmos</addon-name>
<language-name>xul/html</language-name>
<component>
<component-name>ZKYearBox</component-name>
<component-class>com.ecosmos.zkoss.ext.ZKYearBox</component-class>
<extends>datebox</extends>
</component>
<addon-name>my.extension</addon-name><!-- any name you like -->
<javascript src="js/YearBox.js" /> <!-- assume you package it as /myjs/foo.js -->
</language-addon>
See this may be it will help you
Hi Stephan
Thank you.
I have done some thing here
But still my objective is not solved.
In the above post, at the bottom, you can see what i am trying to achieve
Anyway, i read that article and if i able to resolve, i will update here.
Can this article help you?
Asked: 2013-01-16 18:36:06 +0800
Seen: 102 times
Last updated: Jan 22 '13
Any help ?
Senthilchettyin ( 2013-01-18 13:12:50 +0800 )edit