API: paginator UIComponentTemplate.js (YUI Library)

# Yahoo! UI Library

### paginator 2.9.0

Yahoo! UI Library > paginator > UIComponentTemplate.js (source view)
Search:
Filters Show Private Show Protected Show Deprecated

    (function () {

    var Paginator = YAHOO.widget.Paginator,
        l         = YAHOO.lang,
        setId     = YAHOO.util.Dom.generateId;

    /**
     * Describe the ui Component
     *
     * @namespace YAHOO.widget.Paginator.ui
     * @class YourComponent
     * @for YAHOO.widget.Paginator
     *
     * @constructor
     * @param p {Pagintor} Paginator instance to attach to
     */
    Paginator.ui.YourComponent = function (p) {
        this.paginator = p;

        this.initListeners();
    };

    /**
     * Decorates Paginator instances with new attributes. Called during
     * Paginator instantiation.
     * @method init
     * @param p {Paginator} Paginator instance to decorate
     * @static
     */
    Paginator.ui.YourComponent.init = function (p) {

        // add any config attributes your component needs onto the Paginator
        // instance

        /**
         * Describe your attribute.
         * @attribute myAttr
         * @type {HTML}
         * @default 'foo'
         */
        p.setAttributeConfig('myAttr', {
            value : 'foo',
            validator : l.isString
        });

    };

    // Instance members and methods
    Paginator.ui.YourComponent.prototype = {

        // instance members to store the component state and DOM elements that
        // will represent this component's ui

        /**
         * Describe the node that will be stored in this property
         * @property button
         * @type HTMLElement
         * @private
         */
        button : null, // null until render()

        // instance methods

        /**
         * Subscribe to the Paginator's events that will affect this component's ui
         * @method initListeners
         */
        initListeners : function () {
            var p = this.paginator;

            // Subscribe to any of these that are pertinent to your component's ui
            p.subscribe('recordOffsetChange',this.update,this,true);
            //p.subscribe('rowsPerPageChange', this.update,this,true);
            //p.subscribe('totalRecordsChange',this.update,this,true);

            // subscribe to any change events for attributes this component adds
            // to the Paginator
            p.subscribe('myAttrChange',this.rebuild,this,true);

            // Always subscribe to destroy
            p.subscribe('destroy',this.destroy,this,true);
        },

        /**
         * Generate the nodes and return the appropriate node given the current
         * pagination state.
         * @method render
         * @param id_base {string} used to create unique ids for generated nodes
         * @return {HTMLElement}
         */
        render : function (id_base) {
            var node = this._initUI(id_base);

            this._bindUI();

            return node;
        },

        /**
         * Initialize the DOM nodes managed by this component
         * @method initUI
         * @param id_base {string} used to create unique ids for generated nodes
         * @private
         */
        _initUI : function (id_base) {
            var myVal = this.paginator.get('myAttr');

            this.button = document.createElement('button');
            setId(this.button, id_base + '-first-link');
            this.button.innerHTML = myVal;
            // etc

            this.update();

            return this.button;
        },

        /**
         * Attach DOM event listeners to the nodes managed by this component
         * @method bindUI
         * @private
         */
        _bindUI : function () {
            YAHOO.util.Event.on(this.button,'click',this.onClick,this,true);
        },

        /**
         * Make any necessary changes to the component nodes
         * @method update
         * @param e {CustomEvent} The calling change event
         */
        update : function (e) {
            // It's a good idea to check if there actually was a change
            if (e && e.prevValue === e.newValue) {
                return;
            }

            if (this.paginator.get('recordOffset') < 1) {
                this.button.disabled = true;
            } else {
                this.button.disabled = false;
            }
        },

        /**
         * Make more substantial changes in a separate method if necessary
         * @method rebuild
         * @param e {CustomEvent} the calling change event
         */
        rebuild : function (e) {
            // Making sure there actually was a change
            if (e && e.prevValue === e.newValue) {
                return;
            }

            this.button.disabled = false;
            this.button.innerHTML = this.paginator.get('myAttr');
            // etc

            this.update();
        },

        /**
         * Remove the generated DOM structure
         * @method destroy
         * @private
         */
        destroy : function () {
            YAHOO.util.Event.purgeElement(this.button);
            this.button.parentNode.removeChild(this.button);
            this.button = null;
        },

        /**
         * Listener for a DOM event from a managed element.  Pass new value to
         * Paginator.setStartIndex(..), .setPage(..) etc to fire off changeRequest
         * events.  DO NOT modify the managed element's state here.  That should
         * happen in response to the Paginator's recordOffsetChange event (et al)
         * @method onClick
         * @param e {DOMEvent} The click event
         */
        onClick : function (e) {
            YAHOO.util.Event.stopEvent(e);
            this.paginator.setStartIndex(42);
        }
    };

    })();

Copyright © 2011 Yahoo! Inc. All rights reserved.