[CLOSED] IE9, Panel with Column Layout and Hide/Show methods problem

  1. #1

    [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.

    <%@ 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]
  2. #2
    Hi,

    BUT if you FIRE the resize script when the FIELDSET is HIDDEN, then you wont be able to show it again.
    It appears to be working fine for me. I click on the third button - resizing, then click on the first button - FieldSet appears.

    Please update from SVN and re-test.

    Also I advice to wrap PageLoad's code in the following IF instruction.

    Example
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.fieldInCuestion.Hide();
        }
    }
  3. #3
    I ll try it as soon i can fix some problem with the REV 3561, just updated from the SVN and it is not working for me.
    I ll open a new thread.
  4. #4
    Here i come again Daniil.
    I still have the problem.

    I think i wrote something wrong and it confused you ... the Fieldset si allways shown/hidden, but the Panel inside it, the one who has de column layout, dissapears.
    The panel is the problem, not the fieldset itself.

    Here i give some some images.

    This one was took before runnig the resize script.
    Click image for larger version. 

Name:	PanelOk.jpg 
Views:	205 
Size:	57.5 KB 
ID:	2682

    This one, was took after running the resize script, while the fieldset was hidden (the fieldset and the panel). If you run the resize script while the controls are being shown, the problem wont appear.
    Click image for larger version. 

Name:	MissingPanel.jpg 
Views:	174 
Size:	63.9 KB 
ID:	2683

    Inside the panel you can find a label that is not shown in the second image.

    Can you reproduce this issue??

    For your information, im using IE9 and this page is being opened in anothers page ext:window
  5. #5
    Now I reproduced, thanks for the extra details.

    To fix the issue please set HideMode="Offsets" for the fieldInCuestion FieldSet.
  6. #6
    Working perfect Daniil!!

    As allways, thanks you very mutch!

Similar Threads

  1. [CLOSED] TabPanel Show/Hide Panel
    By amitpareek in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 02, 2012, 3:21 PM
  2. Replies: 2
    Last Post: Dec 19, 2011, 1:53 PM
  3. Replies: 0
    Last Post: Mar 03, 2011, 1:08 PM
  4. [CLOSED] Show Hide Grid Panel from runtime
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 23, 2011, 6:32 PM
  5. Show and Hide Panel with javascript in Chrome
    By Paul D in forum 1.x Help
    Replies: 5
    Last Post: Nov 11, 2010, 7:53 PM

Tags for this Thread

Posting Permissions