Question

I have a requirement to extend the YUI Panel with some custom functionality that will be in a new file and shared across multiple views.

I am at a bit of a loss as to how best to go about this, can anyone give me any pointers please?

Answer 1

Let’s say you want to extend a Panel to create one that has a list in its body. I usually use Y.Base.create for this. It’s a more declarative way of extending YUI classes than using a constructor and Y.extend. But I’ll stay closer to your example in the YUI forums.

There are a couple of tricks dealing with WidgetStdMod (one of the components of Y.Panel), but mostly it’s just about using Y.extend and following the YUI inheritance patterns. I’ll try to answer with an example:

function MyPanel() {
    MyPanel.superclass.constructor.apply(this, arguments);
}
// hack: call it the same so you get the same css class names
// this is good for demos and tests. probably not for real life
MyPanel.NAME = 'panel';

MyPanel.ATTRS = {
    listItems: {
        // YUI now clones this array, so all's right with the world
        value: []
    },
    bodyContent: {
        // we want this so that WidgetStdMod creates the body node
        // and we can insert our list inside it
        value: ''
    }
};

Y.extend(MyPanel, Y.Panel, {
    // always a nice idea to keep templates in the prototype
    LIST_TEMPLATE: '<ul class="yui3-panel-list"></ul>',

    initializer: function (config) {
        // you'll probably want to use progressive enhancement here
        this._listContainer = Y.Node.create(this.LIST_TEMPLATE);

        // initializer is also the place where you'll want to instantiate other
        // objects that will live inside the panel
    },

    renderUI: function () {
        // you're inheriting from Panel, so you'll want to keep its rendering logic
        // renderUI/bindUI/syncUI don't call the superclass automatically like
        // initializer and destructor
        MyPanel.superclass.renderUI.call(this);

        // Normally we would append stuff to the body in the renderUI method
        // Unfortunately, as of 3.5.0 YUI still removes all content from the body
        // during renderUI, so we either hack it or do everything in syncUI
        // Hacking WidgetStdModNode is doable but I don't have the code around
        // and I haven't memorized it
        //var body = this.getStdModNode('body');
    },

    syncUI: function () {
        // same here
        MyPanel.superclass.syncUI.call(this);

        // insert stuff in the body node
        var listContainer = this._listContainer.appendTo(this.getStdModNode('body'));

        Y.Array.each(this.get('listItems'), function (item) {
            listContainer.append('<li>' + item + '</li>');
        });
    }
});