PDA

View Full Version : TabPanel - tabs content wrongly displayed if tab is not active during its filling



Peter.Treier
Jun 30, 2020, 7:56 AM
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.

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;
}


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,

fabricio.murta
Jun 30, 2020, 9:30 AM
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!