1. 3 Feb 2011 7:06 AM #1
    MacUnix
    MacUnix is offline
    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.
    Reply With Quote Reply With Quote
  2. 3 Feb 2011 8:09 AM #2
    johnathanhebert
    johnathanhebert is offline
    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
    }
}
    Reply With Quote Reply With Quote
  3. 3 Feb 2011 10:57 AM #3
    darthwes
    darthwes is offline
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    631
    Vote Rating
    -15
    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
    Reply With Quote Reply With Quote
  4. 4 Feb 2011 12:37 AM #4
    MacUnix
    MacUnix is offline
    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 ?
    Reply With Quote Reply With Quote
  5. 4 Feb 2011 4:29 AM #5
    conorarmstrong
    conorarmstrong is offline
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    222
    Vote Rating
    0
    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.
    Reply With Quote Reply With Quote
  6. 4 Feb 2011 5:34 AM #6
    MacUnix
    MacUnix is offline
    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>
    Reply With Quote Reply With Quote
  7. 4 Feb 2011 6:11 AM #7
    conorarmstrong
    conorarmstrong is offline
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    222
    Vote Rating
    0
    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.
    Reply With Quote Reply With Quote
  8. 4 Feb 2011 6:31 AM #8
    MacUnix
    MacUnix is offline
    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.
    Reply With Quote Reply With Quote
  9. 8 Feb 2011 4:57 AM #9
    MacUnix
    MacUnix is offline
    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.
    Reply With Quote Reply With Quote

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. [OPEN-805] ItemSelector not rendered tabpanel when tabpanel.deferredRender=false
    By gholyoak in forum Ext 3.x: Bugs
    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. [OPEN] EXT 1.1Beta TabPanel.removeTab('tabId') does ! auto hide tabpanel when 1 panel active
    By jay@moduscreate.com in forum Ext 1.x: Bugs
    Replies: 4
    Last Post: 21 Jun 2007, 6:54 AM