PDA

View Full Version : Template TabPanel



bartonjd
6 Jul 2010, 5:11 PM
I posted this as an example in the ComponentDataView thread by condor but I don't want to hijack his thread and I wanted to post this here so that if anyone has feedback I can make changes. This extension allows you to specify a template for tabpanel items and that template will be compiled based on records from the store.

Code and Example


Ext.ns('Ext.ux');
Ext.ux.TplTabPanel = Ext.extend(Ext.TabPanel, {
initComponent: function () {
//Ext.apply(this,{store:this.store});
Ext.ux.TplTabPanel.superclass.initComponent.apply(this, arguments);

var tb = this;
var itemArr = [];

var cnt = tb.store.getCount();

Ext.each(this.tabsTpl, function (j) {
for (var i = 0; i < tb.store.getCount(); i++) {


var c = j.render ? c = j.cloneConfig() : Ext.ComponentMgr.create(j);


function myfn() {
Ext.apply(this, tb.store.getAt(i).get(this.applyValues));
}
c.cascade(myfn);
Ext.ComponentMgr.register(c);

tb.items.add(c.id, c);

}
});

},
});
Ext.reg('tabtpl', Ext.ux.TplTabPanel);


Ext.onReady(function () {
new Ext.Viewport({
layout: 'hbox',
layoutConfig: {
align: 'stretch'
},
defaults: {
flex: 1
},
items: new Ext.ux.TplTabPanel({
id: 'climate_panel',
activeTab: 0,
store: new Ext.data.JsonStore({
storeId: 'weather',
data: [{
id: 'raw',
panel: {
title: 'Raw',
id: 'rawfield'
},
fieldset: {
title: 'Observed',
id: 'observed'
},
checks: {
items: [{
boxLabel: 'Precipitation',
id: 'chk1'
},
{
boxLabel: 'Temperature',
id: 'chk2'
}]
}
},
{
id: 'hourly',
panel: {
title: 'Hourly',
id: 'hourfield'
},
fieldset: {
title: 'Observed Hourly',
id: 'observed_hourly'
},
checks: {
items: [{
boxLabel: 'Altimeter'
},
{
boxLabel: 'Visibility'
}]
}
}],
fields: ['panel', 'title', 'id', 'cn', 'value', 'checks', 'fieldset', 'boxLabel', 'items'],

}),
tabsTpl: {
xtype: 'panel',
layout: 'form',
applyValues: 'panel',
items: {
xtype: 'fieldset',


applyValues: 'fieldset',
items: {
xtype: 'checkboxgroup',
//items:[],
applyValues: 'checks'
}
}
}
})


});
});

View a demo (http://jbarton.virtualkingdoms.net/tpltabpanel.html)
Any feedback is appreciated

latika
8 Jul 2010, 11:38 AM
I just clicked on "View a demo" and I get blank page with error in status bar:
Here is the error:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322)
Timestamp: Thu, 8 Jul 2010 19:37:30 UTC

Message: Expected identifier, string or number
Line: 37
Char: 1
Code: 0
URI: http://jbarton.virtualkingdoms.net/tpltabpanel.html

bartonjd
8 Jul 2010, 4:29 PM
Hmmm, I can try testing it with Firefox 4.0 but firefox 3.66, 3.64, IE8, Chrome, Safari all vied it fine, I did however check line 37 and removed a comma that wasn't necessary, perhaps your browser was running in some variation of a "strict" mode that I did not encounter, please let me know if you continue to see this problem.