1. #1
    Sencha User
    Join Date
    Sep 2008
    Posts
    83
    Vote Rating
    0
    frankthetank is on a distinguished road

      0  

    Default Accordion inside tabpanel problem

    Accordion inside tabpanel problem


    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.

  2. #2
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


    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;',

  3. #3
    Sencha User
    Join Date
    Sep 2008
    Posts
    83
    Vote Rating
    0
    frankthetank is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


    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...

Similar Threads

  1. Problem using tree inside accordion
    By coolrb in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 17 Jun 2009, 4:02 AM
  2. Scrollbar in Tree inside an Accordion Problem
    By zerodivide in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 12 Nov 2008, 12:55 AM
  3. GridPanel inside accordion layout forceFit problem IE6
    By mabello in forum Ext 2.x: Help & Discussion
    Replies: 16
    Last Post: 2 Apr 2008, 1:04 AM
  4. [SOLVED] Grid inside Accordion problem
    By paubach in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 3 Mar 2008, 6:07 AM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar