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

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