Accordion inside tabpanel problem

**frankthetank** · 1 Oct 2010, 9:11 AM

Hi,

I have a strange problem that I cannot find the solution.
I have a tabpanel on my east region of a viewport. Inside, i have multiple tabs which 1 is an accordion (the first).

When I click on the second tab, the accordion still shows there and the content of the others tabs do not show. I need to click on my first tab (accordion) and then go back to the other tab and now the content is showing.

I did try doLayout on the tabpanel, region, tabs and also tried with layoutOnTabChange:true on the tabpanel, nothing. Also, is it possible to make the tabpanel the east region instead of adding it in another panel ?

Here is the example for this, so you can reproduce it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Portail</title>
	<link rel="stylesheet" type="text/css" href="/js/ext-3.2.0/resources/css/ext-all.css" />
 	<script type="text/javascript" src="/js/ext-3.2.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/js/ext-3.2.0/ext-all.js"></script>

	<script type="text/javascript">
			
    Ext.onReady(function(){
		Ext.QuickTips.init();
		 		
		var haut = new Ext.Panel({
						layout:'column',
						region:'north',
						height:45,
						bodyStyle:'background:transparent; border:0px; margin:0px;'
					});
										
		var droite = {
                    region:'east',
			id:'droite',
                    title: 'T&acirc;ches',
                    collapsible: true,
                    split:true,
                    width: 175,
                    minSize: 175,
                    maxSize: 225,
			layout: 'anchor',
                    margins:'0 5 0 0',
                    items:[
                        new Ext.TabPanel({
				id:'taches',
                            border:false,
                            activeTab:0,
				layoutOnTabChange:true,
				enableTabScroll: true,
				anchor: '100% 100%',
                            tabPosition:'top'
                        })
			]
                 };	 
				 
		var gauche = {
			id:'gauche',
                    region:'west',
                    title: 'Navigation',
                    collapsible: true,
                    split:true,
                    width: 175,
                    minSize: 175,
                    maxSize: 225,
                    layout:'fit',
                    margins:'0 0 0 0',
                    items:[
                        new Ext.TabPanel({
				id:'tab_gauche',
                            border:false,
                            activeTab:0,
                            tabPosition:'top',
				enableTabScroll: true,
                            items:[
					{html:'test'}
					]
                        })
			]
                 }; 
				 
		var centre = new Ext.TabPanel({
			id:'centre',
                    region:'center',
                    deferredRender:false,
                    activeTab:0,
			enableTabScroll:true,
			layoutOnTabChange: true,
                    items:[
				{html:'test'}					
			]
                });
		
	 	var viewport = new Ext.Viewport({
            layout:'border',
            items:[
                haut, 
		droite,
		gauche,
                centre
             ]
        });
		
		
		var tabTache = new Ext.Panel({
			title: 'T&acirc;ches',
			id:'tabTaches',
			layout:'accordion',
			defaults: {
				bodyStyle: 'padding:5px'
			},
			layoutConfig: {
				animate: true
			},
			items: [{
				title: 'Test',
				id:'taches_test',
				autoScroll:true,
				nocache:true
			}, {
				title: 'TEst1',
				id:'taches_test1',
				autoScroll:true,
				nocache:true
			}]
		});
		
		Ext.getCmp('taches').add(tabTache);
		Ext.getCmp('taches').add({html:'test2',title:'test2'});
		Ext.getCmp('taches').add({html:'test3',title:'test2'});
		Ext.getCmp('taches').add({html:'test4',title:'test2'});
		
		//Ext.getCmp('taches').doLayout();
		
    });
	</script>
</head>
<body>
  <div id="north" style="margin:0px;">
    <p style="margin:0px;">
		test
	</p>
  </div>  
  <div id="south">
  </div>
 
 </body>
</html>

Tried with latest google chrome and IE 8, same thing.
To reproduce :

1- Click on test2 tab (you will still see the content of the first tab).
2- CLick on Taches tab
3- Click again on test2 tab, and now you will see the proper content.

Thanks.

**plalx** · 1 Oct 2010, 11:40 AM

I am unable to reproduce the error with IE8 in normal or compatiblity mode.

Btw, you have an extra comma here:

Code:

 
bodyStyle:'background:transparent; border:0px; margin:0px;',

**frankthetank** · 1 Oct 2010, 11:54 AM

My mistake. Remove the , but still getting the same thing. Tested like you in IE 8 but I'm able to reproduce the problem.

**plalx** · 1 Oct 2010, 5:29 PM

I have tried at home too with IE8, still works for me... ?

The first time I select the Test2 tab... I see test2 as content, when selection t�ches, I see the accordion and when selecting Test2 tab again I still see test2...

Thread: Accordion inside tabpanel problem

Thread Tools

Search Thread

Display

Accordion inside tabpanel problem

Similar Threads

Problem using tree inside accordion

Scrollbar in Tree inside an Accordion Problem

GridPanel inside accordion layout forceFit problem IE6

[SOLVED] Grid inside Accordion problem

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News