PDA

View Full Version : [CLOSED] Problem with tab panel



infonext
Mar 15, 2014, 4:05 PM
Hi all,

i have one problem with tabpanel.
I have a tab panel with one fixed tab like "favorites" links based on your example http://examples2.ext.net/#/DataView/Advanced/Grouping/.
If i click one element of dataview another tab is opened and a new page is loaded inside.
It's work but if i resize the browser the content of tab disappears and i see the clicked element inside the tab.
Instead if i close the opened tab the clicked element disappears from the dataview.

Starting situation
8401


After click first item
8431


After firs item clicked and resize
8421

After click "esci" (exit)
8441


Start page code Aspx


<%@ Page Language="C#" AutoEventWireup="true" ClientIDMode="Static" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

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


<!DOCTYPE html>

<html>

<head id="Head1" runat="server">



<style>
.preferiti .x-tab-default {
display: none;
}


div.item-wrap {
float: left;
border: 1px solid transparent;
margin: 5px 25px 5px 25px;
width: 100px;
cursor: pointer;
height: 120px;
text-align: center;
}

div.item-wrap img {
margin: 5px 0px 0px 5px;
width: 61px;
height: 77px;
}

div.item-wrap h6 {
font-size: 14px;
color: #3A4B5B;
font-family: tahoma,arial,san-serif;
}

div.x-view-over {
border: solid 1px silver;
}

#items-ct {
padding: 0px 30px 24px 30px;
}

#items-ct h2 {
border-bottom: 2px solid #3A4B5B;
cursor: pointer;
}

#items-ct h2 div {
background: transparent url(resources/images/group-expand-sprite.gif) no-repeat 3px -47px;
padding: 4px 4px 4px 17px;
font-family: tahoma,arial,san-serif;
font-size: 12px;
color: #3A4B5B;
}

#items-ct .collapsed h2 div {
background-position: 3px 3px;
}

#items-ct dl {
margin-left: 2px;
}

#items-ct .collapsed dl {
display: none;
}
</style>
<script>

</script>



<title>Main Page</title>


</head>
<body id="mybody" runat="server">

<form id="Form1" runat="server">

<asp:HiddenField runat="server" ID="uxWinID" />
<asp:XmlDataSource ID="MnuXmlDataSource" runat="server"></asp:XmlDataSource>

<ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="Main">

</ext:ResourceManager>
<ext:Hidden runat="server" ID="txtMinTimeOut"></ext:Hidden>
<ext:Hidden runat="server" ID="txtActualTime"></ext:Hidden>

<ext:Viewport ID="MainPageViewport" runat="server" Layout="BorderLayout"
Border="true">

<Items>

<ext:Hidden runat="server" ID="hiddenazienda"></ext:Hidden>



<ext:TabPanel Margins="10 0 10 0" Frame="true" runat="server" ID="tabpanel1" Region="Center" Border="false" >

<Items>
<ext:Panel runat="server" ID="preferiti" Title="Preferiti" HideMode="Offsets" >

<Items>

<ext:DataView
ID="Dashboard"

runat="server"
SingleSelect="true"
ItemSelector="div.group-header"
EmptyText="No items to display">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Title" />
<ext:ModelField Name="Items" Type="Object" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl ID="Tpl1" runat="server">
<Html>
<div id="items-ct">
<tpl for=".">
<div class="group-header">
<h2><div>{Title}</div></h2>
<dl>
<tpl for="Items">
<div id="{Id}" class="item-wrap">
<img src="{Icon}"/>
<div>
<H6>{Title}</H6>
</div>
</div>
</tpl>
<div style="clear:left"></div>
</dl>
</div>
</tpl>
</div>
</Html>
</Tpl>


<Listeners>
<ItemClick Fn="itemClick"></ItemClick>
<Refresh Handler="this.el.select('.item-wrap').addClsOnOver('x-view-over');" Delay="100" />

</Listeners>
</ext:DataView>

</Items>
</ext:Panel>

</Items>










<Listeners>
<Add Handler="this.tabBar.insert(0, this.tabBar.child('#btnstart'));"></Add>



</Listeners>
<TabBar>

<ext:Button ID="btnstart" runat="server" IconUrl="Images/extnet16.png" TextAlign="Right" Text="Menu">
<Bin>
<ext:Panel ID="mnupanel" Resizable="true" runat="server" Floating="true" Layout="AccordionLayout" AutoScroll="true" Width="350">
<Items>








</Items>
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server" ClassicButtonStyle="true">
<Items>

<ext:Button ID="Button3" runat="server" Text="Chiudi" Handler="function(){this.up('panel').hide();}">
</ext:Button>
<ext:ToolbarFill ID="ToolbarFill2" runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Bin>
<Listeners>
<Click Handler="#{btnstart}.bin[0].show(); #{btnstart}.bin[0].alignTo(#{btnstart}.el);menuhide(#{tabpanel1},#{m nupanel})">
</Click>
</Listeners>
</ext:Button>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:LinkButton runat="server" Text="LogOut" ID="lnksignout">
<DirectEvents>
<Click OnEvent="lnksignout_click" />
</DirectEvents>
</ext:LinkButton>
</TabBar>


</ext:TabPanel>

<ext:Panel Frame="true" ID="EastPanel" Border="false" runat="server" Region="South">
<Items>
<ext:Toolbar ID="MainPageToolbar" runat="server" Layout="HBoxLayout">
<Items>
<ext:Label ID="lblfunzione" runat="server" Text="">
</ext:Label>
<ext:ToolbarFill></ext:ToolbarFill>
<ext:Label ID="lblUsername" runat="server" Text="Username: "></ext:Label>
<ext:ToolbarSeparator ID="separator1"></ext:ToolbarSeparator>
<ext:Label ID="lblUltimoaccesso" runat="server" Text="Accesso: "></ext:Label>
<ext:ToolbarSeparator ID="separator2"></ext:ToolbarSeparator>
<ext:Label ID="lblIp" runat="server" Text="Ip: "></ext:Label>
</Items>
</ext:Toolbar>
</Items>


</ext:Panel>

</Items>
</ext:Viewport>

<ext:Window runat="server" ID="frmTimeOut"
Width="500"
Height="100"
Modal="true"
Closable="false"
Hidden="true"
Layout="FormLayout"
Draggable="false"
Padding="12">

<Items>
<ext:Label runat="server" ID="lbltimeouttext" Text="" />


</Items>
</ext:Window>
</form>
<script type="text/javascript">
function menuhide(tabpanel, mnupanel) {
if (tabpanel.items.length > 1) {
mnupanel.items.each(function (c) { c.disable(); })

}
else {
mnupanel.items.each(function (c) { c.enable(); })
}
}



function hidetab(tab) {


tab.addCls("preferiti");

}

var itemClick = function (view, record, item, index, e) {
var group = e.getTarget("h2", 3, true);

if (group) {
group.up("div").toggleCls("collapsed");
return false;
}

var item = e.getTarget(".item-wrap");
if (item) {
Ext.Msg.alert("Click", "The node with id='" + item.id + "' has been clicked");
Main.test(record.raw, item.id);

}
};

function tabclose() {
// Ext.getCmp('tabpanel1').getComponent("preferiti").reload(true);
Ext.getCmp('tabpanel1').setActive(0);
Ext.getCmp('tabpanel1').items.getAt(0).setDisabled (false);
}



</script>
</body>
</html>




Start page code behind .cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using System.Xml;
using System.IO;
using System.Text;
using System.Xml.Linq;

namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{



protected void Page_Load(object sender, EventArgs e)
{

string[] cookies = Request.Cookies.AllKeys;


XElement document = XElement.Load(Server.MapPath("resources/DashboardSchema.xml"));
string defaultIcon = document.Attribute("defaultIcon") != null ? document.Attribute("defaultIcon").Value : "";

IEnumerable<object> query = from g in document.Elements("group")
select new
{
Title = g.Attribute("title") != null ? g.Attribute("title").Value : "",
Items = (from i in g.Elements("item")
select new
{
Title = i.Element("title") != null ? i.Element("title").Value : "",
Icon = i.Element("item-icon") != null ? i.Element("item-icon").Value : defaultIcon,
Id = i.Element("id") != null ? i.Element("id").Value : ""
}
)
};

this.Store1.DataSource = query;
this.Store1.DataBind();







if (!IsPostBack && !X.IsAjaxRequest)
{


String line;
using (StreamReader sr = new StreamReader(Server.MapPath("~/App_Data/menu.xml")))
{
line = sr.ReadToEnd();

}
MnuXmlDataSource.Data = line;




}


}



protected void treeClick(object sender, DirectEventArgs e)
{





if (!string.IsNullOrEmpty(e.ExtraParams["treenodehref"]))
{

string recid = e.ExtraParams["recid"];
string title = e.ExtraParams["title"];
string codproc = e.ExtraParams["reccodproc"];

Ext.Net.Panel newpanel = new Ext.Net.Panel();

newpanel.Loader = new ComponentLoader();
newpanel.ID = recid;
newpanel.Loader.Url = e.ExtraParams["treenodehref"] + "?codproc=" + codproc;
newpanel.Loader.Mode = LoadMode.Frame;
newpanel.Loader.LoadMask.ShowMask = true;
newpanel.Closable = false;

//newpanel.HasChild = true;

newpanel.DirectEvents.Close.Event += Close_Event;

if (newpanel.Loader.Url.ToUpper().Contains("RUOLI/"))
{
newpanel.Title = "Ruoli";
}
if (newpanel.Loader.Url.ToUpper().Contains("UTENTI/"))
{
newpanel.Title = "Utenti";
}
if (newpanel.Loader.Url.ToUpper().Contains("GRUPPI/"))
{
newpanel.Title = "Gruppi";
}
if (newpanel.Loader.Url.ToUpper().Contains("TABELLEGENERICHE/"))
{
newpanel.Title = "Tabelle Generiche";
}

if (newpanel.Loader.Url.ToUpper().Contains("PAZIENTI/"))
{
newpanel.Title = "Pazienti";
}


if (newpanel.Loader.Url.ToUpper().Contains("PRESTAZIONI/"))
{
newpanel.Title = "Prestazioni";
}

if (newpanel.Loader.Url.ToUpper().Contains("PROVINCIE/"))
{
newpanel.Title = "Provincie";
}

if (newpanel.Loader.Url.ToUpper().Contains("COMUNI/"))
{
newpanel.Title = "Comuni";
}

newpanel.Layout = "Fit";


newpanel.AddTo(tabpanel1, true);
tabpanel1.SetActiveTab(newpanel);


}



}

protected void Close_Event(object sender, DirectEventArgs e)
{
// ((MyExtNet.Extensions.ExtendendPanel)sender).HasCh ild = false;
//preferiti.Enable();
// Call("parent.App.lblfunzione.setText('')");
}
[DirectMethod]
public void logout()
{
System.Web.Security.FormsAuthentication.SignOut();

Response.Redirect("~/Login.aspx");
}

protected void lnksignout_click(object sender, DirectEventArgs e)
{

logout();
}

protected void item_click(object sender, DirectEventArgs e)
{

}








[DirectMethod]
public void test(string json, string id)
{
string href = "";
PreferitoGroup favoriti = JSON.Deserialize<PreferitoGroup>(json);


foreach (var pref in favoriti.Items)
{
if (pref.Id == id)
{
href = pref.Title;
}
}




Ext.Net.Panel newpanel = new Ext.Net.Panel();



newpanel.Loader = new ComponentLoader();
newpanel.ID = id;
newpanel.Loader.Url = href + "?codproc=" + 999;
newpanel.Loader.Mode = LoadMode.Frame;
newpanel.Loader.LoadMask.ShowMask = true;
newpanel.Closable = false;

// newpanel.HasChild = true;
newpanel.Listeners.Close.Handler = "tabclose();";
// newpanel.DirectEvents.Close.Event += Close_Event;

newpanel.Title = id;

newpanel.HideMode = HideMode.Offsets;
newpanel.Layout = "Fit";


newpanel.AddTo(tabpanel1, true);
tabpanel1.SetActiveTab(newpanel);
preferiti.Disable();
}


}
}

public class PreferitoGroup
{

public string Title { get; set; }
public Preferito[] Items { get; set; }

public PreferitoGroup()
{


}

public class Preferito
{
public string Title { get; set; }
public string Icon { get; set; }
public string Id { get; set; }

}


}


Other page (opened in tab panel) aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WebApplication1.test" %>


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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

<title></title>
</head>
<body>
<form id="Form1" runat="server">

<asp:HiddenField runat="server" ID="txtcodiceid" ViewStateMode="Enabled" />


<ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="Paziente">
</ext:ResourceManager>





<ext:Hidden runat="server" ID="HiddenField1" Text="0"></ext:Hidden>

<ext:Viewport
ID="Viewport1"
runat="server"
Border="false"
AutoScroll="false"
Layout="BorderLayout">
<Items>
<ext:Toolbar Frame="true" ID="Toolbar1" Region="North" runat="server" Margins="0 0 10 0">
<Items>





<ext:Button runat="server" ID="btnEsci" Icon="DoorOut" Text="Esci">
<Listeners>
<Click Handler="escipagina()"></Click>
</Listeners>
</ext:Button>

<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server">
</ext:ToolbarSeparator>




</Items>
</ext:Toolbar>










</Items>
</ext:Viewport>
</form>


</body>
</html>

<script type="text/javascript">









function escipagina() {
// parent.App.lblfunzione.setText("");
// setazienda();
var thistab = parent.App.tabpanel1.getComponent("OtherTab");
parent.App.tabpanel1.setActiveTab(parent.App.tabpa nel1.getComponent("preferiti"));
thistab.close();


}



</script>






DashBoardSchema.xml

<?xml version="1.0" encoding="utf-8" ?>
<groups defaultIcon="resources/images/icon.png">
<group title="Management">
<item>
<title>~/test.aspx</title>
<item-icon>resources/images/icon.png</item-icon>
<id>OtherTab</id>
</item>

<item>
<title>Orders</title>
<id>orders</id>
</item>

<item>
<title>Reports</title>
<id>reports</id>
</item>

</group>

<group title="Other group">
<item>
<title>Inventory</title>
<id>inventory</id>
</item>

<item>
<title>Suppliers</title>
<id>suppliers</id>
</item>

<item>
<title>Help</title>
<id>help</id>
</item>

<item>
<title>Options</title>
<id>options</id>
</item>

<item>
<title>Employees</title>
<id>employees</id>
</item>
</group>
</groups>




think is a strange behavior.
Any idea about?

Many thanks and best regards

Daniil
Mar 17, 2014, 6:41 AM
Hi @infonext,

The behavior that you described reminds me the behavior with an ids conflict when some components have the same ids. Please check all the components (which appears and disappears unpredictably) have unique ids.

infonext
Mar 17, 2014, 3:52 PM
Hi Daniil,

many thanks you're right!!!
The problem is exactly an id duplication.