PDA

View Full Version : [CLOSED] [#9] TabPanel Loader issue



softmachine2011
Oct 09, 2012, 3:06 PM
Hi,

I don't know why exactly but, with this test case, if you collapse and expand west region, center region is reloaded doing a server call again.

TEST CASE


<!DOCTYPE html>
<html>
<head runat="server">
<title>IconCombo - Ext.NET Examples</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 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>


LOADER VIEW


<script type="text/javascript">
function checkHandler() {
return false;
}
</script>
<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.grid1.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="grid1" runat="server" Header="false" Border="false">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Sample button"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="store1" 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:ComponentColumn runat="server" DataIndex="State" Width="250" Text="State">
<Component>
<ext:RadioGroup runat="server" ID="State" GroupName="State">
<Items>
<ext:Radio runat="server" InputValue="0" BoxLabel="State0">
<Listeners>
<Change Fn="checkHandler" />
</Listeners>
</ext:Radio>
<ext:Radio runat="server" InputValue="1" BoxLabel="State1">
<Listeners>
<Change Fn="checkHandler" />
</Listeners>
</ext:Radio>
<ext:Radio runat="server" InputValue="2" BoxLabel="State2">
<Listeners>
<Change Fn="checkHandler" />
</Listeners>
</ext:Radio>
</Items>
</ext:RadioGroup>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Viewport>


CONTROLLER


public ActionResult Grid()
{
return View();
}


This behaviour doesn't reproduces in v1.x. Is there any thing I could do to avoid it?

Daniil
Oct 09, 2012, 5:08 PM
Hi @softmachine2011,

Thank you for the report! There is a simplified test case below.

It looks like a browser reloads an iframe when the West region is expanded, because the Loader functionality seems to be not used - I tested with masking and a BeforeLoad listener.

It needs to investigate why it gets reloaded.

Example

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

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server" Layout="BorderLayout">
<Items>
<ext:Panel
runat="server"
Region="West"
Width="200"
Title="East"
Collapsible="true" />

<ext:Panel runat="server" Region="Center" Title="Center">
<Loader Mode="Frame" Url="Test.aspx">
<LoadMask ShowMask="true" />
<Listeners>
<BeforeLoad Handler="alert('BeforeLoad');" />
</Listeners>
</Loader>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>

Vladimir
Oct 09, 2012, 10:28 PM
I notice that if use CollapseMode="Mini" for West region then the issue is gone
I guess that BorderLayout makes some manipullation with dom elements (i mean move dom elements) during region expanding. Moving iframe element in DOM tree forces its reloading by browser

softmachine2011
Oct 10, 2012, 7:00 AM
Well I understand that you are investigating this issue and when you have a fix or workaround with the same behaviour you will notify it to the thread.

With collapseMode mini works but this isn't what I want.

Thanks.

Daniil
Oct 10, 2012, 10:29 AM
We think it is a bug. Reported to Sencha.
http://www.sencha.com/forum/showthread.php?245536

Daniil
Oct 10, 2012, 11:49 AM
Sencha opened a bug ticket. We will monitor.

softmachine2011
Oct 10, 2012, 2:20 PM
Ok I'll expect for a response

softmachine2011
Oct 23, 2012, 2:58 PM
Hi,

Is there any progress or time-frame?

Daniil
Oct 24, 2012, 2:05 PM
Hi @softmachine2011,

Unfortunately, no.

A bug lays deeply in a BorderLayout class. We have to wait a fix from Sencha.

softmachine2011
Oct 25, 2012, 10:49 AM
Hi,

@Animal of Sencha Team has writed in the post a workaround, could you try it with your framework?

Possibly it could be the fix that we will expect from Ext.JS.

Thanks

Daniil
Oct 25, 2012, 3:00 PM
Thank you for the update.

I asked @Animal something. It should help us to determine it should be incorporated into Ext.NET or not.

Anyway, you can use this fix (or workaround) on your page.

geoffrey.mcgill
Nov 16, 2012, 4:41 AM
Opened an Isssue to track this defect, see

https://github.com/extnet/Ext.NET/issues/9

Looks like this issue has been fixed in Ext JS 4.2. The fix will be incorporated in the Ext.NET 2.2 release.

RCN
Nov 29, 2012, 10:13 AM
The following thread is related to the same issue:
http://forums.ext.net/showthread.php?22416-CLOSED-Refreshing-ViewPort-s-center-region-when-expanding-west-one

Daniil
Dec 29, 2012, 10:58 AM
The issue has been fixed in SVN (trunk).

Thank you again for the report.

RCN
Jan 21, 2015, 2:45 PM
On version 3.1.0, evertyhing works as expected.