1. #1
    Sencha User
    Join Date
    Aug 2010
    Location
    Netherlands
    Posts
    7
    Vote Rating
    0
    MacUnix is on a distinguished road

      0  

    Default [Solved] TabPanel with 2 grids only grid in active tab gets rendered

    [Solved] TabPanel with 2 grids only grid in active tab gets rendered


    I am tearing my hairs out over this issue...

    When the page is displayed the panel gets rendered, the first tab displays the data in the store. When I click on the 2nd tab, it is not rendered, just a white area below the tab.
    When is set 'activeTab: 1', the 2nd tab gets displayed correctly and the 1st tab is not rendered when selecting it.

    - tab 1 is displayed
    - selecting tab 2
    is blank
    - selecting tab 1
    is displayed
    - selecting tab 2
    gridpanel of tab1 is displayed in tab2

    What am I doing wrong here ?
    I have other tabpanels with the same code, that work fine.

    Code:
    Ext.onReady(function() 
    	{
    		var reportParameters = getParams();
      		storeTrafficDest.baseParams.startDate = reportParameters['start'];
      		storeTrafficDest.baseParams.endDate = reportParameters['end'];
      		storeTrafficDest.baseParams.reportGranularity = reportParameters['granularity'];
      		storeTrafficDest.baseParams.filterList = reportParameters['filter'];
    		storeTrafficDest.load();
      		storeCustTrafficDest.baseParams.startDate = reportParameters['start'];
      		storeCustTrafficDest.baseParams.endDate = reportParameters['end'];
      		storeCustTrafficDest.baseParams.reportGranularity = reportParameters['granularity'];
      		storeCustTrafficDest.baseParams.filterList = reportParameters['filter'];
    		storeCustTrafficDest.load();
    
      		
    		var reportView = new Ext.TabPanel(
    		{
    			activeTab: 0,
    			renderTo: document.body,
    			width: 1000,
    			height: 500,
    			layoutOnTabChange: true,
    			defaults: 
    			{
    				autoscroll: true,
    				hideMode: 'offsets'
    			},
    			items: 
    			[
    				{
    					id: 'trafficDest',
    					xtype: 'grid',
    					title: 'Traffic Destination',
    					store: storeTrafficDest,
    					loadMask: true,
    					enableColumnHide: false,
    					columnLines: true,
    					childReports: '',
    					hideParent: true,
    					columns: 
    					[
    						{ header: 'LocIdx', sortable: false, dataIndex: 'loc_idx', hidden: true },
    						{ header: 'Country', sortable: true, dataIndex: 'country', width: 125 },
    						{ header: 'Location', sortable: true, dataIndex: 'location', width: 125 },
    						{ header: 'iCalls', sortable: true, dataIndex: 'tot_icalls', width: 75 },
    						{ header: 'iAnswd', sortable: true, dataIndex: 'tot_ianswd', width: 75 },
    						{ header: 'iMinutes', sortable: true, dataIndex: 'tot_idur', width: 75 },
    						{ header: 'iASR(%)', sortable: true, dataIndex: 'iasr', width: 60 },
    						{ header: 'iACD(m)', sortable: true, dataIndex: 'iacd', width: 60 },
    						{ header: 'oCalls', sortable: true, dataIndex: 'tot_ocalls', width: 75 },
    						{ header: 'oAnswd', sortable: true, dataIndex: 'tot_oanswd', width: 75 },
    						{ header: 'oMinutes', sortable: true, dataIndex: 'tot_odur', width: 75 },
    						{ header: 'oASR(%)', sortable: true, dataIndex: 'oasr', width: 60 },
    						{ header: 'oACD(m)', sortable: true, dataIndex: 'oacd', width: 60 }
    					]
    				},
    				{
    					id: 'custTrafficDest',
    					xtype: 'grid',
    					title: 'Traffic Per Destination',
    					store: storeCustTrafficDest,
    					loadMask: true,
    					enableColumnHide: false,
    					columnLines: true,
    					hideParent: true,
    					columns: 
    					[
    						{ header: 'LocIdx', sortable: false, dataIndex: 'loc_idx', width: 75 },
    						{ header: 'Location', sortable: true, dataIndex: 'location', width: 125 },
    						{ header: 'iCalls', sortable: true, dataIndex: 'tot_icalls', width: 75 },
    						{ header: 'iAnswd', sortable: true, dataIndex: 'tot_ianswd', width: 75 },
    						{ header: 'iMinutes', sortable: true, dataIndex: 'tot_idur', width: 75 },
    						{ header: 'iASR(%)', sortable: true, dataIndex: 'iasr', width: 60 },
    						{ header: 'iACD(m)', sortable: true, dataIndex: 'iacd', width: 60 },
    						{ header: 'oCalls', sortable: true, dataIndex: 'tot_ocalls', width: 75 },
    						{ header: 'oAnswd', sortable: true, dataIndex: 'tot_oanswd', width: 75 },
    						{ header: 'oMinutes', sortable: true, dataIndex: 'tot_odur', width: 75 },
    						{ header: 'oASR(%)', sortable: true, dataIndex: 'oasr', width: 60 },
    						{ header: 'oACD(m)', sortable: true, dataIndex: 'oacd', width: 60 }
    					]
    				}
    			]
      		});
      	});
    Last edited by MacUnix; 8 Feb 2011 at 5:02 AM. Reason: Solved issue.

  2. #2
    Sencha User johnathanhebert's Avatar
    Join Date
    Apr 2008
    Posts
    77
    Vote Rating
    0
    johnathanhebert is on a distinguished road

      0  

    Default Call doLayout

    Call doLayout


    You may have to call doLayout() on the tab when it is activated the first time... so add a (one-time) listener for the activate event on the tab, or add a listener for the tabchange event on the TabPanel

    Code:
    listeners:{
        'activate':{
            fn:function(tab) {
                tab.doLayout();
            },
            single:true
        }
    }

  3. #3
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    Code:
    var mygrid = new ...({
      deferredRender: false
      ...
    });
    or

    Code:
    var mygrid = new ...({
      forceLayout: true
      ...
    });
    should get ya where you want.
    Wes

  4. #4
    Sencha User
    Join Date
    Aug 2010
    Location
    Netherlands
    Posts
    7
    Vote Rating
    0
    MacUnix is on a distinguished road

      0  

    Default


    Thanks guys, but the issue remains the same.
    I tried the event and options in the grid definition, but the same issue.
    Can it be related to the store definition ?

  5. #5
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224
    Vote Rating
    2
    conorarmstrong is on a distinguished road

      0  

    Default


    Where are storeTrafficDest and storeCustTrafficDest defined?

    Also, would updating baseParams with something like:
    Code:
    var reportParameters = getParams();
    storeTrafficDest.baseParams=Ext.apply(storeTrafficDest.baseParams,{
      startDate: reportParameters.start,
      endDate: reportParameters.end,
      reportGranularity: reportParameters.granularity,
      filterList: reportParameters.filter
    });
    or even

    Code:
    var d=storeTrafficDest.baseParams, s=getParams();
    d=Ext.apply(d,{
      startDate: s.start,
      endDate: s.end,
      reportGranularity: s.granularity,
      filterList: s.filter
    });
    not be a lot neater?
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  6. #6
    Sencha User
    Join Date
    Aug 2010
    Location
    Netherlands
    Posts
    7
    Vote Rating
    0
    MacUnix is on a distinguished road

      0  

    Default


    The stores are defined in an include file.
    Code:
    storeTrafficDest = new Ext.data.JsonStore(
    {
    	name: 'storeTrafficDest',
    	url: './ext-autojson.php?sel=trafficdest',
    	baseParams: {startDate: '2010-04-01', endDate: '2010-05-01', reportGranularity: 'Weekly', filterList: 'All'},
    	root: 'rows',
    	remoteSort: false,
    	autoLoad: false,
    	sortInfo:
    	{
    		field: 'location',
    		direction: 'ASC'
    	},
    	reportFields: 'loc_idx,cst_idx',
    	filterFields: 'cst_idx',
    	idProperty: 'loc_idx',
    	fields:
    	[
    		{ name: 'loc_idx', sortType: 'asInt', type: 'int' },
    		{ name: 'country', sortType: 'asUCString', type: 'string' },
    		{ name: 'location', sortType: 'asUCString', type: 'string' },
    		{ name: 'tot_icalls', sortType: 'asInt', type: 'int' },
    		{ name: 'tot_ianswd', sortType: 'asInt', type: 'int' },
    		{ name: 'tot_idur', sortType: 'asInt', type: 'int' },
    		{ name: 'iasr', sortType: 'asInt', type: 'int' },
    		{ name: 'iacd', sortType: 'asInt', type: 'int' },
    		{ name: 'tot_ocalls', sortType: 'asInt', type: 'int' },
    		{ name: 'tot_oanswd', sortType: 'asInt', type: 'int' },
    		{ name: 'tot_odur', sortType: 'asInt', type: 'int' },
    		{ name: 'oasr', sortType: 'asInt', type: 'int' },
    		{ name: 'oacd', sortType: 'asInt', type: 'int' }
    	],
    });
    
    storeCustTrafficDest = new Ext.data.JsonStore(
    {
    	name: 'storeCustTrafficDest',
    	url: './ext-autojson.php?sel=custtrafficdest',
    	baseParams: {startDate: '2010-04-01', endDate: '2010-05-01', reportGranularity: 'Weekly', filterList: 'All'},
    	root: 'rows',
    	remoteSort: false,
    	autoLoad: false,
    	sortInfo:
    	{
    		field: 'location',
    		direction: 'ASC'
    	},
    	idProperty: 'loc_idx',
    	reportFields: 'loc_idx,cst_idx',
    	filterFields: 'cst_idx',
    	fields:
    	[
    		{ name: 'loc_idx', sortType: 'asInt', type: 'int' },
    		{ name: 'location', sortType: 'asUCString', type: 'string' },
    		{ name: 'tot_icalls', sortType: 'asInt', type: 'int' },
    		{ name: 'tot_ianswd', sortType: 'asInt', type: 'int' },
    		{ name: 'tot_idur', sortType: 'asInt', type: 'int' },
    		{ name: 'iasr', sortType: 'asInt', type: 'int' },
    		{ name: 'iacd', sortType: 'asInt', type: 'int' },
    		{ name: 'tot_ocalls', sortType: 'asInt', type: 'int' },
    		{ name: 'tot_oanswd', sortType: 'asInt', type: 'int' },
    		{ name: 'tot_odur', sortType: 'asInt', type: 'int' },
    		{ name: 'oasr', sortType: 'asInt', type: 'int' },
    		{ name: 'oacd', sortType: 'asInt', type: 'int' }
    	]
    });
    I changed the code to display both grids below each other and that works fine :
    So looks like the grid and store definitions are fine.

    Code:
    <!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->
    <html>
     
    <!-- Each valid html page must have a head; let's create one. -->
    <head>
      <!-- The following line defines content type and utf-8 as character set. -->
      <!-- If you want your application to work flawlessly with various local -->
      <!-- characters, just make ALL strings, on the page, json and database utf-8. -->
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     
      <!-- Ext relies on its default css so include it here. -->
      <!-- This must come BEFORE javascript includes! -->
      <link rel="stylesheet" type="text/css" href="../../include/ext/resources/css/ext-all.css" />
      <link rel="stylesheet" type="text/css" href="../../include/ext/resources/css/xtheme-gray.css" />
      <link rel="stylesheet" href="css/statusbar.css" type="text/css" />
     
      <!-- Include here your own css files if you have them. -->
      <link rel="stylesheet" href="./styles.css" type="text/css">
      <!-- First of javascript includes must be an adapter... -->
      <script type="text/javascript" src="../../include/ext/adapter/ext/ext-base-debug.js"></script>
     
      <!-- ...then you need the Ext itself, either debug or production version. -->
      <script type="text/javascript" src="../../include/ext/ext-all-debug.js"></script>
      <script type="text/javascript" src="../../include/ext-addons/ux/GroupSummary.js"></script>
      
      <!--
      <script type="text/javascript" src="../../include/ext/src/locale/ext-lang-nl.js"></script>
      -->
      <!-- Include here your extended classes if you have some. -->
      <script src="./ext-js/statusbar/StatusBar.js" type="text/javascript" language="javascript"></script>
    
    
    
      <!-- Include here you application javascript file if you have it. -->
      <script type="text/javascript" src="./js/genericfunctions.js"></script>
      <script type="text/javascript" src="./ext-js/substores.js"></script>
      <script type="text/javascript" src="./ext-js/functions.js"></script>
      <!-- <script type="text/javascript" src="./ext-js/actions.js"></script> -->
     
     
      <!-- Set a title for the page (id is not necessary). -->
      <title id="page-title">TRS Report (Carriers->Per destination/ Per period)</title>
     
      <!-- You can have onReady function here or in your application file. -->
      <!-- If you have it in your application file delete the whole -->
      <!-- following script tag as we must have only one onReady. -->
      <script type="text/javascript">
     
      // Path to the blank image must point to a valid location on your server
      	Ext.BLANK_IMAGE_URL = '../../include/ext/resources/images/default/s.gif';
      	
      	
      	
      	Ext.onReady(function() 
    	{
    		var reportParameters = getParams();
    		var reportTitle = '';
      		storeTrafficDest.baseParams.startDate = reportParameters['start'];
      		storeTrafficDest.baseParams.endDate = reportParameters['end'];
      		storeTrafficDest.baseParams.reportGranularity = reportParameters['granularity'];
      		storeTrafficDest.baseParams.filterList = reportParameters['filter'];
    		
      		storeCustTrafficDest.baseParams.startDate = reportParameters['start'];
      		storeCustTrafficDest.baseParams.endDate = reportParameters['end'];
      		storeCustTrafficDest.baseParams.reportGranularity = reportParameters['granularity'];
      		storeCustTrafficDest.baseParams.filterList = reportParameters['filter'];
    		
    		reportTitle = reportParameters['carriers'].replace(/%20/g, " ").split('_');
    		reportTitle += reportParameters['granularity'] + " [" + reportParameters['start'] + "-" + reportParameters['end'] +"]";
      		document.getElementById('reportTitle').innerHTML = reportTitle;
    		
    		var report1 = new Ext.grid.GridPanel(
    		{
    			id: 'trafficDest',
    			renderTo: 'report1',
    			title: 'Traffic Destination',
    			store: storeTrafficDest,
    			loadMask: true,
    			enableColumnHide: false,
    			columnLines: true,
    			childReports: '',
    			height: 400,
    			columns: 
    			[
    				{ header: 'LocIdx', sortable: false, dataIndex: 'loc_idx', hidden: true },
    				{ header: 'Country', sortable: true, dataIndex: 'country', width: 125 },
    				{ header: 'Location', sortable: true, dataIndex: 'location', width: 125 },
    				{ header: 'iCalls', sortable: true, dataIndex: 'tot_icalls', width: 75 },
    				{ header: 'iAnswd', sortable: true, dataIndex: 'tot_ianswd', width: 75 },
    				{ header: 'iMinutes', sortable: true, dataIndex: 'tot_idur', width: 75 },
    				{ header: 'iASR(%)', sortable: true, dataIndex: 'iasr', width: 60 },
    				{ header: 'iACD(m)', sortable: true, dataIndex: 'iacd', width: 60 },
    				{ header: 'oCalls', sortable: true, dataIndex: 'tot_ocalls', width: 75 },
    				{ header: 'oAnswd', sortable: true, dataIndex: 'tot_oanswd', width: 75 },
    				{ header: 'oMinutes', sortable: true, dataIndex: 'tot_odur', width: 75 },
    				{ header: 'oASR(%)', sortable: true, dataIndex: 'oasr', width: 60 },
    				{ header: 'oACD(m)', sortable: true, dataIndex: 'oacd', width: 60 }
    			],
    			listeners:
    			{
    				'activate': {fn:function(tab){tab.doLayout();},single: true}
    			}
    		});
    				
    		var report2 = new Ext.grid.GridPanel(
    		{
    			id: 'custTrafficDest',
    			renderTo: 'report2',
    			title: 'Traffic Per Destination',
    			store: storeCustTrafficDest,
    			loadMask: true,
    			enableColumnHide: false,
    			columnLines: true,
    			height: 400,
    			columns: 
    			[
    				{ header: 'LocIdx', sortable: false, dataIndex: 'loc_idx', width: 75 },
    				{ header: 'Location', sortable: true, dataIndex: 'location', width: 125 },
    				{ header: 'iCalls', sortable: true, dataIndex: 'tot_icalls', width: 75 },
    				{ header: 'iAnswd', sortable: true, dataIndex: 'tot_ianswd', width: 75 },
    				{ header: 'iMinutes', sortable: true, dataIndex: 'tot_idur', width: 75 },
    				{ header: 'iASR(%)', sortable: true, dataIndex: 'iasr', width: 60 },
    				{ header: 'iACD(m)', sortable: true, dataIndex: 'iacd', width: 60 },
    				{ header: 'oCalls', sortable: true, dataIndex: 'tot_ocalls', width: 75 },
    				{ header: 'oAnswd', sortable: true, dataIndex: 'tot_oanswd', width: 75 },
    				{ header: 'oMinutes', sortable: true, dataIndex: 'tot_odur', width: 75 },
    				{ header: 'oASR(%)', sortable: true, dataIndex: 'oasr', width: 60 },
    				{ header: 'oACD(m)', sortable: true, dataIndex: 'oacd', width: 60 }
    			],
    			listeners:
    			{
    				'activate': {fn:function(tab){tab.doLayout();},single: true}
    			}
    		});
      		
      		storeTrafficDest.load();
      		storeCustTrafficDest.load();
      	}); 	
      	</script>
     
    <!-- Close the head -->  
    </head>
     
    <!-- You can leave the body empty in many cases, or you write your content in it. -->
    <body>
    	<div id="reportTitle"></div>
    	<div id="report1"></div>
    	<div id="report2"></div>
    </body>
     <!-- Close html tag at last -->
    </html>

  7. #7
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224
    Vote Rating
    2
    conorarmstrong is on a distinguished road

      0  

    Default


    looks like a height issue. try

    Code:
    layout: 'fit'
    in the tabpanel definition
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  8. #8
    Sencha User
    Join Date
    Aug 2010
    Location
    Netherlands
    Posts
    7
    Vote Rating
    0
    MacUnix is on a distinguished road

      0  

    Default


    Ext.TabPanel does not support the 'layout:' attribute.
    I added it to the 'grid' definitions in the 'items[]' section, same result.

    If I do a storeCustTrafficDest.load() in the debugger with the 2nd tab active, the loadmask does not appear. It will appear in the tab that was activated using 'activeTab' attribute in the TabPanel definition.
    If I change the 'activeTab: 0' to 'activeTab: 1', the 2nd tab displays fine.
    So something in the TabPanel definition, but what..

    Tried in Safari and Firefox, same results.

  9. #9
    Sencha User
    Join Date
    Aug 2010
    Location
    Netherlands
    Posts
    7
    Vote Rating
    0
    MacUnix is on a distinguished road

      0  

    Default Solved.

    Solved.


    I made the page from scratch and added a height:400 and removed the hideParent: true parameters and now it works like a charm.

Similar Threads

  1. TabPane(IGNORE) l with 2 grids only grid in active tab get rendered
    By MacUnix in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 3 Feb 2011, 6:57 AM
  2. Replies: 3
    Last Post: 23 Jul 2010, 6:19 AM
  3. id of an active tabpanel
    By ballibum in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 8 Jan 2010, 6:46 AM
  4. TabPanel - how to active tab ?
    By noah17 in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 22 Sep 2008, 11:59 PM
  5. Replies: 4
    Last Post: 21 Jun 2007, 6:54 AM

Thread Participants: 3

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi