May 04, 2011, 7:33 PM
[CLOSED] IE9, Panel with Column Layout and Hide/Show methods problem
Hi people, i am having a problem showing a hidden panel with a colum layout.
Here is the deal ...
As you will see in the code, i have a principal viewport with a panel inside. This structure is in all my pages. I also have a script that finds the size of the window that contains the viewport and resizes the principal panel to fit in the page correctly.
This script is triggered by the DocumentReady Listener of the ResourceManager in every page and its working perfectly at the moment.
In this example, you must trigger it by clicking a button.
Inside the principal panel is the real page. In the example you will see a little structure with a TabPanel, FormPanel, FieldSet and a Panel. This last panel is the one in trouble.
There are 3 buttons in the example:
1- Shows the Fieldset wich contains the panel
2- Hides the Fieldset wich contains the panel
3- Fires the resize script
As you will see in the example, you can hide and show the Fieldset without problem, BUT if you FIRE the resize script when the FIELDSET is HIDDEN, then you wont be able to show it again. If you fire the script while the fieldset is being shown, you will have no problems.
Hope you understand this example. Sorry if it is too long but i took me like 4 hours to see what the problem was, and this is the most short example i could do.
Hope you can solve this issue.
Thanks in advance!!!!
Here is the deal ...
As you will see in the code, i have a principal viewport with a panel inside. This structure is in all my pages. I also have a script that finds the size of the window that contains the viewport and resizes the principal panel to fit in the page correctly.
This script is triggered by the DocumentReady Listener of the ResourceManager in every page and its working perfectly at the moment.
In this example, you must trigger it by clicking a button.
Inside the principal panel is the real page. In the example you will see a little structure with a TabPanel, FormPanel, FieldSet and a Panel. This last panel is the one in trouble.
There are 3 buttons in the example:
1- Shows the Fieldset wich contains the panel
2- Hides the Fieldset wich contains the panel
3- Fires the resize script
As you will see in the example, you can hide and show the Fieldset without problem, BUT if you FIRE the resize script when the FIELDSET is HIDDEN, then you wont be able to show it again. If you fire the script while the fieldset is being shown, you will have no problems.
Hope you understand this example. Sorry if it is too long but i took me like 4 hours to see what the problem was, and this is the most short example i could do.
<%@ Page Language="C#"%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.fieldInCuestion.Hide();
}
public void showItems(object sender, DirectEventArgs e)
{
this.fieldInCuestion.Show();
}
</script>
<script type="text/javascript" language="javascript">
function hideControl(control) {
control.hide();
}
function adaptarResolucionLocal(panelPrincipal) {
if (window.innerWidth) {
page_width = window.innerWidth;
page_height = window.innerHeight;
} else {
if (window.innerWidth > 0) {
page_width = document.body.clientWidth;
page_height = document.body.clientHeight;
} else {
page_width = document.body.offsetWidth;
page_height = document.body.offsetHeight;
}
}
panelPrincipal.setWidth(page_width);
panelPrincipal.setHeight(page_height);
redibujarAnchoAltoDeControlesHijos(panelPrincipal);
}
function redibujarAnchoAltoDeControlesHijos(parentControl) {
var cantidadItems = parentControl.items.getCount();
for (var i = 0; i < cantidadItems; i++) {
var childControl = parentControl.items.itemAt(i);
var size = 0;
var altura = 0;
try {
size = parentControl.getWidth();
altura = parentControl.getHeight() - 70;
}
catch (err) {
size = parentControl.width;
altura = parentControl.height - 70;
}
if (childControl.getXType() != 'netgrid') {
size = size - 15;
}
childControl.setWidth(size);
childControl.setHeight(altura);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ScriptManager1" runat="server"></ext:ResourceManager>
<ext:Viewport ID="viewPortPrincipal" runat="server" AutoHeight="true" Layout="Fit">
<Items>
<ext:Panel ID="pnlPrincipal" ButtonAlign="center" Frame="true" runat="server">
<Items>
<ext:TabPanel ID="tabPanelExample" runat="server" Height="200" Width="600" Plain="true" AutoScroll="true">
<Items>
<ext:Panel ID="tabExample1" runat="server" Title="Example tab" Frame="true" AutoScroll="true" Padding="5">
<Items>
<ext:FormPanel ID="formTabExample1" runat="server" Padding="6" AutoWidth="True">
<Items>
<ext:Label ID="lblExampleOnFieldset" Text="I am a label outise the fieldset. I am allways visible." Width="350" runat="server"></ext:Label>
<ext:FieldSet ID="fieldInCuestion" Title="I am the HIDE/SHOW FieldSet " runat="server" Height="70" Padding="10">
<Items>
<ext:Label runat="server" ID="lblOusideLayoutColumn" Text="I am a label OUTSIDE the panel with the ColumnLayout" Width="350" Icon="Accept"></ext:Label>
<ext:Panel ID="pnlWithColLayout" Layout="column" Height="50" AutoWidth="true" runat="server">
<Items>
<ext:Label runat="server" ID="lblExample" Text="I am a label INSIDE the panel with the ColumnLayout" Width="350" Icon="Accept"></ext:Label>
</Items>
</ext:Panel>
</Items>
</ext:FieldSet>
</Items>
</ext:FormPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
<Buttons>
<ext:Button runat="server" ID="btnShowItemsDirectEvent" Text="I SHOW fieldInCuestion">
<DirectEvents>
<Click OnEvent="showItems"></Click>
</DirectEvents>
</ext:Button>
<ext:Button runat="server" ID="btnHide" Text="I HIDE fieldInCuestion">
<Listeners>
<Click Handler="hideControl(#{fieldInCuestion});" Delay="1" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="btnShowItemsListener" Text="I Change PanelPrincipal and tabPanelExample sizes. Click me when FieldSet is HIDDEN.">
<Listeners>
<Click Handler="adaptarResolucionLocal(#{pnlPrincipal});" Delay="1" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
The only solution i found to this problem is REMOVING THE COLUMNLAYOUT FROM THE PANEL. If you do that, the problem is gone.Hope you can solve this issue.
Thanks in advance!!!!
Last edited by Daniil; May 05, 2011 at 7:07 PM.
Reason: [CLOSED]