ExtJs: update() & autoScroll not working - extjs4

Question

I'm trying to update the html of a tabPanel. The scrollbar is there on the initial load, but then on update the scroll bar disappears.
This is my code:
var text = "a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>";
years = [];
items = [];
for(i=this_year; i>2002; i--) {
years.push(i);
}
for(i=0; i<parents.length; i++) {
items.push({
xtype: 'tabpanel',
title: years[i],
id: 'tabs' + years[i],
activeTab: 0,
autoScroll: true,
html: text, // this works just fine
});
}
var tp = new Ext.TabPanel({
renderTo: div,
id: 'tabs',
activeTab: 0,
items: items,
autoFit: true,
height: 500,
width: 500,
listeners: {
'tabchange': function(tabPanel, tab){
// dynamically update the html
}
}
});
// but if i instead use this the scrollbar disappears
Ext.get('tabs' + 2014).update(text);
Is there some other way to update the HTML?

Answer 1

Got it working with contentEl and jQuery's appendTo:
years = [];
items = [];
for(i=this_year; i>2002; i--) {
years.push(i);
}
for(i=0; i<parents.length; i++) {
$('<div id="tabs' + years[i] + '"></div>').appendTo("#some_div");
items.push({
xtype: 'tabpanel',
title: years[i],
id: 'foo-tabs' + years[i],
activeTab: 0,
autoScroll: true,
contentEl: 'tabs' + years[i],
});
}
var tp = new Ext.TabPanel({
renderTo: div,
id: 'foo-tabs',
activeTab: 0,
items: items,
autoFit: true,
height: 500,
width: 500,
listeners: {
'tabchange': function(tabPanel, tab){
}
}
});
$('some html').appendTo('#tabs' + year);