1

setWidgetOverride [closed]

asked 2013-01-16 18:36:06 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

updated 2013-01-22 15:49:26 +0800

neillee gravatar image neillee flag of Taiwan
1692 1 5
https://plus.google.com/u...

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>
delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by Senthilchettyin
close date 2013-01-22 16:52:14

Comments

Any help ?

Senthilchettyin ( 2013-01-18 13:12:50 +0800 )edit

4 Answers

Sort by ยป oldest newest most voted
0

answered 2013-01-20 04:21:16 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

Thanks all. Resolved

Ben bai helped and here is the link

link publish delete flag offensive edit
0

answered 2013-01-18 17:28:10 +0800

sjoshi gravatar image sjoshi flag of India
3493 1 8
http://zkframeworkhint.bl...

See this may be it will help you

link publish delete flag offensive edit
0

answered 2013-01-17 10:15:39 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

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.

link publish delete flag offensive edit
0

answered 2013-01-17 09:30:47 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

Can this article help you?

link publish delete flag offensive edit

Question tools

Follow

RSS

Stats

Asked: 2013-01-16 18:36:06 +0800

Seen: 102 times

Last updated: Jan 22 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More