A Jx.Field.Spinner: Provide a Text Field with two buttons that fire events

Jx.Field.Spinner.css

.jxInputSpinners {
        position: absolute;
        width: 16px;
        height: 16px;
        right: 0px;
        top: 0px;
        margin: 0px 8px 4px 4px;
        font-size: 0px;
        line-height: 0px;
}

.jxInputSpinners .jxButtonContainer,
.jxInputSpinners .jxButton {
        padding: 0px;
        margin: 0px;
        border: 0px;
        background-color: transparent;
        background-image: none;

}

img.jxInputSpinUpIcon {
        background-image: url(/images/emblems.png);
        background-position: right -160px;
        background-repeat: no-repeat;
        margin-top: -2px;
}

img.jxInputSpinDownIcon {
        background-image: url(/images/emblems.png);
        background-position: right -16px;
        background-repeat: no-repeat;
        margin-top: -2px; 
}

Jx.Field.Spinner.js

/*
---

name: Jx.Field.Spinner

description: A Jx.Field.Spinner: Provide a Text Field with two buttons
that fire events

license: MIT-style license.

provides: [Jx.Field.Spinner]

...
 */
// $Id$
/**
 * Class: Jx.Field.Spinner
 *
 * A Jx.Field.Spinner: Provide a Text Field with two buttons that fire
events
 *
 * Example:
 * (code)
 *      new Jx.Field.Spinner({
 *              label: 'Spin Field',
 *              onSpinUp: function(){
 *                      alert("spin up click event");
 *              },
 *              onSpinDown: function(){
 *                      alert("spin down click event");
 *              }
 *      })
 * (end)
 *
 * Extends:
 * <Jx.Field.Text>
 *
 * Author: Ing. Axel Mendoza Pupo.
 *
 * License:
 * Copyright (c) 2011, Ing. Axel Mendoza Pupo.
 *
 * This file is licensed under an MIT style license
 */

        Jx.Field.Spinner = new Class({
                Extends: Jx.Field.Text,
                options: {
                        buttonTemplate: '<a class="jxButtonContainer jxButton"
href="javascript:void(0);"><img class="jxButtonIcon"
src="'+Jx.aPixel.src+'"></a>',
                /* Option: template
                 */
                template: '<span class="jxInputContainer"><label
class="jxInputLabel"></label><span class="jxInputWrapper"><input
type="text" class="jxInputText"  name="{name}"><span
class="jxInputSpinners"></span></span><span class="jxInputTag"></
span></span>'
                },
                render: function(){
                        this.classes.combine({
                                wrapper: 'jxInputWrapper',
                        revealer: 'jxInputSpinners'
                });
                this.parent();

                var that = this;
                this.buttonUp = new Jx.Button({
                    template: this.options.buttonTemplate,
                    imageClass: 'jxInputSpinUpIcon',
                    onClick: function(){
                                this.fireEvent('spinUp', that);
                        }.bind(this)
                }).addTo(this.revealer);

                this.buttonDown = new Jx.Button({
                    template: this.options.buttonTemplate,
                    imageClass: 'jxInputSpinDownIcon',
                    onClick: function(){
                                this.fireEvent('spinDown', that);
                        }.bind(this)
                }).addTo(this.revealer);
                }
        });