Oct 26, 2012, 8:24 AM
[CLOSED] Issue with Multiple Tabs (iframe) in TabPanel
Hi,
When you load multiple tabs at the same time. Randomly many of these tabs doesn't render well topbar items.
I reproduced in this test case:
TEST CASE
ASPX
When you load multiple tabs at the same time. Randomly many of these tabs doesn't render well topbar items.
I reproduced in this test case:
TEST CASE
ASPX
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server" Layout="BorderLayout" Region="Center">
<Items>
<ext:Panel ID="PanelEast" runat="server" Width="225" Icon="BookOpen" Title="East Title"
Collapsible="true" Layout="FitLayout" Split="true" Region="West">
<Items>
<ext:Label runat="server" Text="some content" />
</Items>
</ext:Panel>
<ext:Panel ID="PanelCenter" runat="server" Width="225" Icon="BookOpen" Title="Center Title"
Collapsible="true" Layout="FitLayout" Split="true" Region="Center">
<Items>
<ext:TabPanel ID="tpMain" runat="server" Region="Center">
<Items>
<ext:Panel runat="server" Title="My Tab">
<Loader runat="server" Mode="Frame" Url="/Area/Sample/Grid" DisableCaching="True" />
</ext:Panel>
<ext:Panel runat="server" Title="My Tab 2">
<Loader runat="server" Mode="Frame" Url="/Area/Sample/Grid" DisableCaching="True" />
</ext:Panel>
<ext:Panel runat="server" Title="My Tab 3">
<Loader runat="server" Mode="Frame" Url="/Area/Sample/Grid" DisableCaching="True" />
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
CONTROLLER
public ActionResult Grid()
{
return View();
}
TAB CONTENT<script runat="server">
public class SampleClass
{
public int Id { get; set; }
public string Name { get; set; }
public int State { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.gridCounters.GetStore();
store.DataSource = new SampleClass[] {
new SampleClass { Id=33,Name="Object with State 0",State=0 } ,
new SampleClass { Id=45,Name="Object with State 1",State=1 } ,
new SampleClass { Id=52,Name="Object with State 2",State=2 }
};
store.DataBind();
}
}
</script>
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel ID="gridCounters" runat="server" Header="false" Border="false">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Sample button" Icon="Add"></ext:Button>
<ext:Button runat="server" Text="Sample button 2" Icon="Application"></ext:Button>
<ext:Button runat="server" Text="Sample button 3" Icon="Delete"></ext:Button>
<ext:Button runat="server" Text="Sample button 4" Icon="Disk"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="dsCounters" runat="server">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="State" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="Id" Text="Id" Hidden="true" Hideable="false" />
<ext:Column runat="server" DataIndex="Name" Text="Name" Width="200">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="State" Text="State" Width="200">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Viewport>
What's wrong?
Last edited by Daniil; Oct 26, 2012 at 11:42 AM.
Reason: [CLOSED]