Wrapping Panel Items in custom template

[Ghostface]

Hi,

I am trying to get the items (List,Carousel etc.) displayed in a Panel wrapped inside a custom Template.
I basically want a box with a header around each item.

I tried to Extend the Container Layout and it gave me semi-good results. However I believe I am doing something wrong as i get duplicates of the widget* divs (i.e. 4 carousels in a panel will end up with 8 boxes, one wrapped around each carousel which is fine, and 4 empty ones).

If somebody could point out where I went wrong or if my approach entirely sucks and theres a prefered way of doing it please let me know.

Any help is appreciated.

Here is the code:



Ext.layout.Dashboard = Ext.extend(Ext.layout.ContainerLayout, {
/**
* @private
*/
type: "dashboard",

/**
* @private
*/
onLayout: function() {
Ext.layout.Dashboard.superclass.onLayout.call(this);
this.prepareItems();
},

/**
* @private
*/
prepareItems: function() {
var items = this.getLayoutItems(),
ln = items.length,
item, i;

for (i = 0; i < ln; i++) {
item = items[i];
item.doComponentLayout();
}
},

/**
* @private
*/

configureItem: function(item, position) {
var box=item.el.wrap({cls: 'widgetBox'});

item.el.wrap({cls: 'widgetBoxContent'});
item.el.wrap({cls: 'widgetBody'});

item.el.createChild({
html: 'test',//item.title,
cls: 'widgetBoxHeader'
},box.first());
},

renderItem: function(item, position, target) {
Ext.layout.Dashboard.superclass.renderItem.call(this, item, position, target);
}
});

Ext.regLayout("dashboard", Ext.layout.Dashboard);

[Ghostface]

So I have no idea if this approach is correct but I ended up with the following that seems to work for now.

The following code will wrap any sencha item (carousel,list etc.) into several divs for giving them a boxed look like this:



<div class="widgetBox" id="ext-gen1036" style="width: 1908px; height: 360px; ">
<div class="widgetBoxHeader" id="ext-gen1037">test</div>
<div class="widgetBoxContent" id="ext-gen1035">
<div class="widgetBody" id="ext-gen1034">
<div id="ext-comp-1013" class=" x-carousel x-carousel-light x-carousel-horizontal"> SENCHA CAROUSEL STUFF</div>
</div>
</div>
</div>


Code is this (still open to suggestions):



Ext.ns("Ext.layout");

Ext.layout.Dashboard = Ext.extend(Ext.layout.ContainerLayout, {
/**
* @private
*/
type: "dashboard",

/**
* @private
*/
onLayout: function() {
Ext.layout.Dashboard.superclass.onLayout.call(this);

this.prepareItems();
},

/**
* @private
*/
prepareItems: function() {
var items = this.getLayoutItems(),
ln = items.length,
item, i;

for (i = 0; i < ln; i++) {
item = items[i];

if(!item.el.hasCls("widgetBox")) {
item.el=item.el.wrap({cls: 'widgetBody'});
item.el=item.el.wrap({cls: 'widgetBoxContent'});
item.el=item.el.wrap({cls: 'widgetBox'});

//item.el.addCls("NOMNOM");
item.el.createChild({
html: 'test',//item.title,
cls: 'widgetBoxHeader'
},item.el.first());
}

item.doComponentLayout();
}
}
});

Ext.regLayout("dashboard", Ext.layout.Dashboard);