TabPanel - tabs content wrongly displayed if tab is not active during its filling

  1. #1

    TabPanel - tabs content wrongly displayed if tab is not active during its filling

    Hello,
    I have upgraded Ext.NET from version 2.5.2 to version 5.0.0 in Asp.NET application
    One of my pages has a TabPanel control defined in the markup.
    Each tab contains a portal panel (Ext.app.PortalPanel), and the portal panel contains a set of columns (Ext.app.PortalColumn).
    Each column contains its own set of widgets (Ext.app.portlet).
    When the page is opened, all tabs are added and filled via javascript.


    Here is the code where the widgets are added into the tab portal, the object _viewData contains information about the position of each widget (tab, column, position):

       function fillPortal() {
            var layout = _availableLayouts[_viewData.currentlayout];
            var viewport = Ext.getCmp('CockpitViewport');
            //EXT.NET v5
            viewport.removeCls('CockpitPortal');
            var mainTabPanel = Ext.getCmp('CockpitMainTabPanel');
            mainTabPanel.removeAll(true);
            var activeTab = null;
            var currentpageindex = _viewData.currentpage
    
            for (var p = 0; p < _viewData.pages.length; ++p) {
                var addedTab = addCockpitPageTab(_viewData.pages[p]);
                loadWidgetsIntoPortal(_viewData.pages[p], addedTab.portal);
                if (p == currentpageindex)
                    activeTab = addedTab.tab;
            }
            setCurrentTab(activeTab);
        }
    As a result, after the upgrade to v 5.0.0, I obtain that just the first added tab is correctly displayed, the other tabs are not: wrong position of widgets, styles not applied and missing parts in the portlet.
    Even the mechanism of tab selection shows some malfunction: I must select the first tab with the mouse in order to select the other tabs.
    I suspect that the first tab is correctly displayed because, being the first added tab, it is "active" and visible when its content is created.

    Click image for larger version. 

Name:	BAD_TABS.jpg 
Views:	3 
Size:	88.1 KB 
ID:	25382


    If, before invoking loadWidgetsIntoPortal, I make the tab I am filling as "active", everything is perfectly displayed and the tab selection mechanism has no problem

     function fillPortal() {
            var layout = _availableLayouts[_viewData.currentlayout];
            var viewport = Ext.getCmp('CockpitViewport');
            //EXT.NET v5
            viewport.removeCls('CockpitPortal');
            var mainTabPanel = Ext.getCmp('CockpitMainTabPanel');
            mainTabPanel.removeAll(true);
            var activeTab = null;
            var currentpageindex = _viewData.currentpage
            _disableUploadPages = true;
            for (var p = 0; p < _viewData.pages.length; ++p) {
                var addedTab = addCockpitPageTab(_viewData.pages[p]);
       // make the tab as 'active'
                setCurrentTab(addedTab.tab);
                loadWidgetsIntoPortal(_viewData.pages[p], addedTab.portal);
                if (p == currentpageindex)
                    activeTab = addedTab.tab;
            }
            setCurrentTab(activeTab);
            _disableUploadPages = false;
        }
    Click image for larger version. 

Name:	GOOD_TABS.jpg 
Views:	4 
Size:	85.0 KB 
ID:	25383
    Is there a way to restore the behavior of v 2.5.2, avoiding the user to see all the tabs filling before selecting the tab corresponding to the currentpageindex ?
    Or do you confirm that in order to correctly display the content of a tab, the tab must be "active" when it is filled?
    thanks in advance,
  2. #2
    Hello @Peter.Treier!

    Sorry you found another issue with the tabs not behaving the same way they did in 2.5.x with the latest Ext.NET.

    Can you provide a test case so we can, based on that, tell you how to build the tab panel where the portals within are properly laid on the page?

    Looking forward to your follow up!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Jan 21, 2017, 3:03 PM
  2. Change tabpanel active tab from inner page
    By sskapci in forum 2.x Help
    Replies: 2
    Last Post: Mar 18, 2014, 7:29 AM
  3. Replies: 1
    Last Post: Oct 31, 2012, 8:41 PM
  4. [CLOSED] Set active tab tabpanel
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 22, 2011, 8:03 AM
  5. TabPanel set active tab on server
    By logicspeak in forum 1.x Help
    Replies: 1
    Last Post: Aug 25, 2010, 4:40 PM

Posting Permissions