{{description}}
Note: when setting content to the sections, this is passed into the doc unescaped. Be carefull not to make a user pass html-content.
Y.ITSAPanel is a widget extention that creates panels, just as Y.Panel does. However, there are some differences:
Y.ITSAPanel easily creates a Panel that can show text or any View-instance. The panel exists of 3 area's: Header, Body and Footer. All these area's have a default template, but this can be overridden by setting the attributes headerView, bodyView footerView. These three attributes can both be a String as well as an Y.View-instance.
By default the section-templates are String-templates which will render the attribute-properties title, titleRight, body, footer and footerRight using Y.Lang.sub under the hood. This means, you can create a Y.ITSAPanel right out of the box like this:
```js
YUI(yuiconfig).use('gallery-itsapanel', function(Y) {
var panel = new Y.ITSAPanel({
title: 'Information',
// we leave 'titleRight' empty: this will render the close-button by default
footer: 'ready',
footerRight: 'ok',
body: 'We can set some message here',
}).render();
panel.show();
});
```
Note: when the attribute titleRight is left undefined, the close-button will be rendered in that area. To remove the buttonclose, you can simple pass it an empty string.
Custom templates can be set through the attributes headerView, bodyView footerView, in case you define them as a String-type. Once set, these will overrule the default templates. Inside the custom templates, You can make a reference to to properties: {title}, {titleRight}, {body}, {footer} and {footerRight} which will be exchanged (under the hood) by their attibute-values through Y.Lang.sub:
```css
```
```js
YUI(yuiconfig).use('gallery-itsapanel', function(Y) {
var panel = new Y.ITSAPanel({
headerView: '
titleRight is unusable now, because it is not part of the header-template.
The attributes headerView, bodyView footerView can also be set by a Y.View-instance. Once set, these will overrule the default templates. The View's container will be bound to the corresponding section-div automaticly and the View's render() method will be executed to fill the section with content. If the View is designed well, the panel-content will automaticly be updated when needed.
```js
YUI(yuiconfig).use('gallery-itsapanel', 'view', function(Y) {
var panel, myview;
myview = new Y.View();
myview.render = function() {
var container = this.get('container');
container.setHTML('You are seeing Y.ITSAPanel with its content generated by a Y.View instance.');
};
panel = new Y.ITSAPanel({
title: 'Information',
bodyView: myview
}).render();
panel.show();
});
```
Note: when a Y.View-instance is used, that particular section does not use Y.Lang.sub for templaterendering. Thus, the corresponding properties {title}, {titleRight}, {body}, {footer} and/or {footerRight} are of no use in that section. This means that the attributes title, titleRight, body, footer and/or footerRight are ignored for that section.
There is a focusmanager active out of the box. The focussing is done by using the (shift)-tab key and takes into account all items with data-focusable="true"
By setting the attribute statusBar true, you create a statusbar inside the panel. See Y.ITSAStatusbar. You can target specific messages to this statusbar by using targeting the messages to the panel-instance, f.e.: Y.alert('oops, something went wrong', {target: yourPanel});.
The Panels are styled by default using Y.ITSAPanels default scheme. You can set styling of by setting the attribute styled to false, or by override the default css-classes: