PDA

View Full Version : [3.1.0] TabStrip can affects on children containers with card layout



Yury
Mar 12, 2015, 12:50 PM
Hello Raphael,

I 've found next issue in TabStrip.

If parent card layout container (Id="Panel1" in code example) has DeferredRender="true" attribute, child card layout container (ID="Ct3") has wrong active index.
How to reproduce: Comment and uncomment LayoutConfig for Panel1 and click on "Text 3" tab. In both cases you can see different result.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Unnamed_Event(object sender, DirectEventArgs e)
{
X.Msg.Notify("", TabStrip1.ActiveTabIndex).Show();
}
</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel ID="Panel1" runat="server" Layout="CardLayout">
<LayoutConfig>
<ext:CardLayoutConfig DeferredRender="true" />
</LayoutConfig>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:TabStrip ID="TabStrip1" runat="server" ActiveTabIndex="0" ActionContainerID="Panel1">
<Items>
<ext:Tab ActionItemID="Ct1" Text="Text 1" />
<ext:Tab ActionItemID="Ct2" Text="Text 2" />
<ext:Tab ActionItemID="Ct3" Text="Text 3" />
</Items>
</ext:TabStrip>
<ext:Button runat="server" Text="Text">
<DirectEvents>
<Click OnEvent="Unnamed_Event" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Container ID="Ct1" runat="server" Html="1">
</ext:Container>
<ext:Container ID="Ct2" runat="server" Html="2">
</ext:Container>
<ext:Container ID="Ct3" runat="server" ActiveIndex="1" Layout="CardLayout">
<LayoutConfig>
<ext:CardLayoutConfig DeferredRender="true" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" Title="A">
</ext:Panel>
<ext:GridPanel runat="server" Title="B">
<Store>
<ext:Store ID="store1" runat="server">
<Fields>
<ext:ModelField Name="A" />
</Fields>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="A" Text="Column" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

RCN
Mar 12, 2015, 6:59 PM
Yury, i think that it would better to you use TabPanel instead of Card.

Your example is simple a TabPanel, accomplished by mixing Card and TabStrip.

Do you agree? if you don't, please expand on your need for using TabStrip.

In addition, i would like aware you that both TabPanel's DefferedRender and ActiveTabIndex work as expected.
http://examples.ext.net/#/Panel/Basic/Deferred_Loading/

I would use Card if i need something similar to the following example: http://examples.ext.net/#/Layout/CardLayout/Basic/

Yury
Mar 13, 2015, 12:36 PM
Raphael,

Thank you for your suggestions but I can't use TabPanel because part of my application has hybrid TabPanel and Wizard structure. Example below.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Unnamed_Event(object sender, DirectEventArgs e)
{
X.Msg.Notify("", TabStrip1.ActiveTabIndex).Show();
}
</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel ID="Panel1" runat="server" Layout="CardLayout">
<LayoutConfig>
<ext:CardLayoutConfig DeferredRender="true" />
</LayoutConfig>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:TabStrip ID="TabStrip1" runat="server" ActiveTabIndex="0" ActionContainerID="Panel1">
<Items>
<ext:Tab ActionItemID="Ct1" Text="Text 1" />
<ext:Tab ActionItemID="Ct2" Text="Text 2" />
<ext:Tab ActionItemID="Ct3" Text="Text 3" />
</Items>
</ext:TabStrip>
<ext:Button runat="server" Text="Text">
<DirectEvents>
<Click OnEvent="Unnamed_Event" />
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Container ID="Ct1" runat="server">
<Items>
<ext:Button runat="server" Text="Button 1">
<Listeners>
<Click Handler="#{Panel1}.getLayout().setActiveItem(3); #{Ct4}.update(item.text)" />
</Listeners>
</ext:Button>
</Items>
</ext:Container>
<ext:Container ID="Ct2" runat="server">
<Items>
<ext:Button runat="server" Text="Button 2">
<Listeners>
<Click Handler="#{Panel1}.getLayout().setActiveItem(3); #{Ct4}.update(item.text)" />
</Listeners>
</ext:Button>
</Items>
</ext:Container>
<ext:Container ID="Ct3" runat="server">
<Items>
<ext:Button runat="server" Text="Button 3">
<Listeners>
<Click Handler="#{Panel1}.getLayout().setActiveItem(3); #{Ct4}.update(item.text)" />
</Listeners>
</ext:Button>
</Items>
</ext:Container>
<ext:Panel ID="Ct4" runat="server" Title="Panel 4">
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


I try to move my app from v2.5 to 3.x and in this process if I see issue in ext.net library, I post it here.

RCN
Mar 13, 2015, 2:23 PM
On the following example, click on Tab and Card buttons to switch the layout. When Card layout is selected, Previous and Next buttons are visible.

22531

22541



<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript">
var movePrevious = function (tabPanel) {
var index = tabPanel.items.indexOf(tabPanel.getActiveTab());

var newIndex = index + -1;

tabPanel.setActiveTab(newIndex);

if (newIndex == 0) {
App._btnPrevious.setDisabled(true);
}
App._btnNext.setDisabled(false);
}
var moveNext = function (tabPanel) {
var index = tabPanel.items.indexOf(tabPanel.getActiveTab());

var newIndex = index + 1;

tabPanel.setActiveTab(newIndex);

if (newIndex == tabPanel.items.length - 1) {
App._btnNext.setDisabled(true);
}
App._btnPrevious.setDisabled(false);
}

var changeToTab = function () {
App._tbp.tabBar.show();
App._tbr.hide();
}
var changeToCard = function () {
App._tbp.tabBar.hide();
App._tbr.show();
}
</script>
</head>
<body>
<ext:ResourceManager ScriptMode="Debug" Theme="Crisp" runat="server" />
<ext:SegmentedButton Margin="10" AllowToggle="true" runat="server">
<Items>
<ext:Button Text="Tab" Pressed="true" runat="server">
<Listeners>
<Click Handler="changeToTab();" />
</Listeners>
</ext:Button>
<ext:Button Text="Card" runat="server">
<Listeners>
<Click Handler="changeToCard();" />
</Listeners>
</ext:Button>
</Items>
</ext:SegmentedButton>
<ext:TabPanel ID="_tbp" Width="450" Height="100" Margin="10" Border="true" runat="server">
<Items>
<ext:Panel Title="Tab 1" Header="false" Html="Content 1" runat="server" />
<ext:Panel Title="Tab 2" Header="false" Html="Content 2" runat="server" />
<ext:Panel Title="Tab 3" Header="false" Html="Content 3" runat="server" />
</Items>
<BottomBar>
<ext:Toolbar ID="_tbr" Hidden="true" runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center" />
</LayoutConfig>
<Items>
<ext:Button ID="_btnPrevious" Text="Previous" Disabled="true" runat="server">
<Listeners>
<Click Handler="movePrevious(#{_tbp});" />
</Listeners>
</ext:Button>
<ext:Button ID="_btnNext" Text="Next" runat="server">
<Listeners>
<Click Handler="moveNext(#{_tbp});" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:TabPanel>
</body>
</html>

RCN
Mar 13, 2015, 2:31 PM
In addition, you can set TabPanel's Title and TabBarHeaderPosition to get the following result

22551

22561



<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript">
var movePrevious = function (tabPanel) {
var index = tabPanel.items.indexOf(tabPanel.getActiveTab());

var newIndex = index + -1;

tabPanel.setActiveTab(newIndex);

if (newIndex == 0) {
App._btnPrevious.setDisabled(true);
}
App._btnNext.setDisabled(false);
}
var moveNext = function (tabPanel) {
var index = tabPanel.items.indexOf(tabPanel.getActiveTab());

var newIndex = index + 1;

tabPanel.setActiveTab(newIndex);

if (newIndex == tabPanel.items.length - 1) {
App._btnNext.setDisabled(true);
}
App._btnPrevious.setDisabled(false);
}

var changeToTab = function () {
App._tbp.tabBar.show();
App._tbr.hide();
}
var changeToCard = function () {
App._tbp.tabBar.hide();
App._tbr.show();
}
</script>
</head>
<body>
<ext:ResourceManager ScriptMode="Debug" Theme="Crisp" runat="server" />
<ext:SegmentedButton Margin="10" AllowToggle="true" runat="server">
<Items>
<ext:Button Text="Tab" Pressed="true" runat="server">
<Listeners>
<Click Handler="changeToTab();" />
</Listeners>
</ext:Button>
<ext:Button Text="Card" runat="server">
<Listeners>
<Click Handler="changeToCard();" />
</Listeners>
</ext:Button>
</Items>
</ext:SegmentedButton>
<ext:TabPanel ID="_tbp" Title="Ext.NET" TabBarHeaderPosition="2" Width="450" Height="100" Margin="10" Border="true" runat="server">
<Items>
<ext:Panel Title="Tab 1" Header="false" Html="Content 1" runat="server" />
<ext:Panel Title="Tab 2" Header="false" Html="Content 2" runat="server" />
<ext:Panel Title="Tab 3" Header="false" Html="Content 3" runat="server" />
</Items>
<BottomBar>
<ext:Toolbar ID="_tbr" Hidden="true" runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Pack="Center" />
</LayoutConfig>
<Items>
<ext:Button ID="_btnPrevious" Text="Previous" Disabled="true" runat="server">
<Listeners>
<Click Handler="movePrevious(#{_tbp});" />
</Listeners>
</ext:Button>
<ext:Button ID="_btnNext" Text="Next" runat="server">
<Listeners>
<Click Handler="moveNext(#{_tbp});" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:TabPanel>
</body>
</html>

Yury
Mar 13, 2015, 3:41 PM
Raphael,

Thank you but I hope this issue will be fixed in the next releases of ext.net.