You need to trigger a layout on the outer component so it knows to measure the content:
Code:
function addText() {
document.getElementById('script').innerHTML='test test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test test ';
window.foo.updateLayout();
}
Ext.onReady(function() {
window.foo = Ext.create('Ext.container.Container', {
layout: 'fit',
renderTo: 'tabs1',
items: [{
xtype: 'tabpanel',
width: 450,
activeTab: 0,
defaults :{
bodyPadding: 10
},
items: [{
contentEl:'script',
title: 'Short Text',
closable: true
}]
}]
});
});
If you're just setting the HTML the component knows nothing about it. Depending on the browsers you're supporting, you may be able to listen to DOM mutation events.