StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Let's say you want to extend a Panel to create one that has a list in its body. I usually use <code>Y.Base.create</code> for this. It's a more declarative way of extending YUI classes than using a constructor and <code>Y.extend</code>. But I'll stay closer to your example in the YUI forums.</p> <p>There are a couple of tricks dealing with WidgetStdMod (one of the components of <code>Y.Panel</code>), but mostly it's just about using <code>Y.extend</code> and following the YUI inheritance patterns. I'll try to answer with an example:</p> <pre><code>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>'); }); } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload