Hi all.
I'm new here. It's a few months that I've started to use ext. Now, I've found a strange behavior. Searching in the forum don't solve my question.
The problem is when I create an empty tab-panel and at runtime I add some panels and active it. At first show() or doLayout() or render() I get on the screen ALL the content at the same time.
You can get a look to the example. In the example I've put 4 different tab-panel: the buggy one, a workaround that I've found, some other tries and a working case.
Now, maybe I've done something worng (I'm a beginner...), but I really can't get a solution...
Thanks for any helps.
Example:
PHP Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<link href="extjs/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
//----------------- NORMAL ADD ------------------------//
//Rational way. Don't works. Add a div panel regardless//
// the 'display' status, that's always show. Buggy? //
var myTab1=new Ext.TabPanel( {
renderTo : 'test1',
height : 150,
autoScroll : true
});
var tab11 = myTab1.add({
title : 'Bug-Tab1',
html : 'First one'
});
var tab12 = myTab1.add({
title : 'Bug-Tab2',
html : 'Second one'
});
var tab13 = myTab1.add({
title : 'Bug-Tab3',
html : 'Another one'
});
myTab1.setActiveTab(tab12.getId());
myTab1.doLayout();
//----------------- FIX METHOD ------------------------//
//Workaround:first adds an empty panel, than onActivate//
// loads the content. //
var myTab2=new Ext.TabPanel( {
renderTo : 'test2',
height : 150,
autoScroll : true
});
var tab21 = myTab2.add(new Ext.Panel({
title : 'Fix-Tab1',
layout : 'fit',
listeners : {
activate : function (p) {
p.add( {
html : 'first one'
});
p.ownerCt.doLayout();
//p.removeListener(...);
}
}
}));
var tab22 = myTab2.add(new Ext.Panel({
title : 'Fix-Tab2',
layout : 'fit',
listeners : {
activate : function (p) {
p.add( {
html : 'second one'
});
p.ownerCt.doLayout();
//p.removeListener(...);
}
}
}));
var tab23 = myTab2.add(new Ext.Panel({
title : 'Fix-Tab3',
layout : 'fit',
listeners : {
activate : function (p) {
p.add( {
html : 'another one'
});
p.ownerCt.doLayout();
//p.removeListener(...);
}
}
}));
myTab2.setActiveTab(tab22.getId());
myTab2.doLayout();
//----------------- NICE TRY ------------------------//
// Some other tries ... //
var myTab3=new Ext.TabPanel( {
renderTo : 'test3',
height : 150,
autoScroll : true
});
var tab31 = myTab3.add(new Ext.Panel({
title : 'Try-Tab1',
layout : 'fit',
items : [{
html : 'first one'
}]
}));
var tab32 = myTab3.add(new Ext.Panel({
title : 'Try-Tab2',
layout : 'fit'
}));
tab32.add( {
html : 'second one'
});
myTab3.doLayout();
var tab33 = myTab3.add(new Ext.Panel({
title : 'Try-Tab3',
layout : 'fit',
items : [{
html : 'another one'
}]
}));
myTab3.setActiveTab(tab32.getId());
myTab3.doLayout();
//----------------- BAD FIX ------------------------//
//A crappy fix: works only for the first or the last//
//activating ALL the tabs (or only the first...) //
var myTab4=new Ext.TabPanel( {
renderTo : 'test4',
height : 150,
autoScroll : true
});
var tab41 = myTab4.add({
title : 'Fkx-Tab1',
html : 'First one'
});
myTab4.setActiveTab(tab41.getId());
var tab42 = myTab4.add({
title : 'Fkx-Tab2',
html : 'Second one'
});
myTab4.setActiveTab(tab42.getId());
var tab43 = myTab4.add({
title : 'Fkx-Tab3',
html : 'Another one'
});
myTab4.setActiveTab(tab43.getId());
myTab4.doLayout();
});
</script>
</head>
<body>
<div id="test1"></div><br><hr><br>
<div id="test2"></div><br><hr><br>
<div id="test3"></div><br><hr><br>
<div id="test4"></div><br>
</body>
</html>
Some problem adding panel at runtime
Reply With Quote