PDA

View Full Version : UI TabPanel



RaphaelSaldanha
Apr 13, 2016, 12:18 PM
On UI > TabPanel example (http://examples.ext.net/#/Miscellaneous/UI/TabPanel/), TabBar layout is changed during TabPanel's TabChange event



var tabchange = function (tabPanel, newCard, oldCard) {
if (oldCard.tabConfig && oldCard.tabConfig.ui != "default") {
tabPanel.getTabBar().removeCls("x-tab-bar-" + oldCard.tabConfig.ui);
}

if (newCard.tabConfig && newCard.tabConfig.ui != "default") {
tabPanel.getTabBar().addCls("x-tab-bar-" + newCard.tabConfig.ui);
}
};


24560

It works on Gray, Neptune and NeptuneTouch but fails on Crisp and CrispTouch. It was not possible to reproduce the issue on Aria and on Triton due to the following: http://forums.ext.net/showthread.php?60832.

Note: The issue presented above is also present on version 3.x, but only on themes Crisp and CrispTouch and Aria since Triton is not present on that version.

Thanks in advance.

fabricio.murta
Apr 14, 2016, 2:30 AM
Hello @Raphael!

That's a known issue since the update and we didn't fix it -- yet!

We only had issue #1245 (https://github.com/extnet/Ext.NET/issues/1245) logged so far but there were no forum issues pointing to it, so that's probably why you didn't find the issue were known.

Now we've bound this thread to the issue and we'll provide feedback here when we fix this.

Thanks for the report!

Daniil
Apr 20, 2016, 1:46 PM
Hello!

#1245 (https://github.com/extnet/Ext.NET/issues/1245) is better to associate to another thread (http://forums.ext.net/showthread.php?60832). Triton UI support has been added (supported in all browsers except IE8 and IE9).

As for the current thread, let's leave it dedicated to the issue with the "tabchange" listener with the Crisp and CrispTouch themes. I will investigate.

RaphaelSaldanha
Apr 20, 2016, 5:42 PM
As for the current thread, let's leave it dedicated to the issue with the "tabchange" listener with the Crisp and CrispTouch themes. I will investigate.


It's possbible to overcome the issue by defining the following CSS rules (lines 5 to 8)

24568


<!DOCTYPE html>
<html>
<head runat="server">
<style type="text/css">
.x-theme-crisp .uiEnabledTabStrip .x-tab-bar-top > .x-tab-bar-strip,
.x-theme-crisptouch .uiEnabledTabStrip .x-tab-bar-top > .x-tab-bar-strip {
height: 2px !important;
}
</style>
<script type="text/javascript">
var tabchange = function (item, newCard, oldCard) {
if (oldCard.tabConfig && oldCard.tabConfig.ui != "default") {
item.getTabBar().removeCls("x-tab-bar-" + oldCard.tabConfig.ui);
}

if (newCard.tabConfig && newCard.tabConfig.ui != "default") {
item.getTabBar().addCls("x-tab-bar-" + newCard.tabConfig.ui);
}
};
</script>
</head>
<body>
<ext:ResourceManager ScriptMode="Debug" Theme="Crisp" runat="server" />
<ext:TabPanel Cls="uiEnabledTabStrip" DeferredRender="false" Title="TabPanel" Width="600" Height="300" Border="true" runat="server">
<Items>
<ext:FormPanel Title="Default" runat="server">
<TabConfig UI="Default" runat="server" />
<Items>
<ext:TextField FieldLabel="Field 001" runat="server" />
</Items>
</ext:FormPanel>
<ext:FormPanel Title="Primary" runat="server">
<TabConfig UI="Primary" runat="server" />
<Items>
<ext:TextField FieldLabel="Field 002" runat="server" />
</Items>
</ext:FormPanel>
<ext:FormPanel Title="Success" runat="server">
<TabConfig UI="Success" runat="server" />
<Items>
<ext:TextField FieldLabel="Field 003" runat="server" />
</Items>
</ext:FormPanel>
</Items>
<Listeners>
<TabChange Fn="tabchange" />
</Listeners>
</ext:TabPanel>
</body>
</html>

Daniil
Apr 21, 2016, 4:50 PM
Thank you.

Okay, Crisp and CrispTouch themes has no tab bar (it is 0px height). It is meant to be like that.

So, I don't think this issue is a bug. To me it is the differences in the themes. A new UI is being applied on a tab bar on the tab change event. But ff it is not visible because of the current theme specificity, well, to me it is okay.

I've revised the tabchange handler to:

var tabchange = function (tabPanel, newCard, oldCard) {
var tabBar = tabPanel.getTabBar();

if (tabBar.getHeight() > 0) {
if (oldCard.tabConfig && oldCard.tabConfig.ui != "default") {
tabBar.removeCls("x-tab-bar-" + oldCard.tabConfig.ui);
}

if (newCard.tabConfig && newCard.tabConfig.ui != "default") {
tabBar.addCls("x-tab-bar-" + newCard.tabConfig.ui);
}
}
};

There is a thing that bothers me even more. With Crisp and CrispTouch themes the tabs don't have borders and it doesn't really look like a TabPanel. It looks like a set of buttons. To improve look&feel I have added text to the tabs to see that something is actually switching on changing the tabs.

Created a GitHub issue to have it logged.
https://github.com/extnet/Ext.NET.Examples/issues/4

The changes have been pushed to the repo and to the Examples online.

Thank you for the suggestions!