What's New?

[CLOSED] Problem hiding / unhiding a panel on the client

Page 1 of 2 12 LastLast
  1. #1
    Feb 03, 2012, 3:01 PM

    [CLOSED] Problem hiding / unhiding a panel on the client

    Hi,

    I'm having an issue with the display of a hidden panel in JS. Some of the controls won't show up and the rest look chopped off a bit. Please refer to the attachment. To reproduce, please click on the "Add" button located in the GridPanel TopBar. That hides both the FormPanelUserSearch and PanelGridContainer panels making the FormPanelUserAdd panel visible. Note the display inconsistencies.
    Then, click the "Cancel" button to restore the initial state.

    Please advise.

    Thanks,

    Vadym
    Attached Files
    Last edited by Daniil; Feb 06, 2012 at 8:46 AM. Reason: [CLOSED]
  2. #2
    Feb 03, 2012, 3:22 PM
    Just found a good suggestion in the related thread at http://forums.ext.net/showthread.php...a-Hidden-Panel. That has resolved the display issue for me.

    Attached is the properly working code sample.

    Thanks,

    Vadym
    Attached Files
  3. #3
    Feb 03, 2012, 3:29 PM
    Hi,

    Just a note for the future - it would be best to post code samples directly here wrapping in [CODE ] tags.
  4. #4
    Feb 03, 2012, 3:31 PM

    Please reopen

    Me again. Sorry, please reopen this thread. That approach unfortunately didn't work for a User Control containing all the markup that I had in the form in the working sample. Would appreciate any fresh idea or suggestions.

    Thanks,

    Vadym
    Last edited by vadym.f; Feb 03, 2012 at 3:47 PM. Reason: Please reopen
  5. #5
    Feb 03, 2012, 4:02 PM
    Same code put in a user control has display issues that doLayout() can't seem to fix. When used straight on the page, ViewPort.doLayout() works.

    It's now my observation that the culprit is using <Content></Content> pair of tags as opposed to <Items></Items> in the ViewPort. There's no issue with <Items>. With UC, I'm not sure how to tackle it. I have to use <Content> it seems.

    Thanks,

    Vadym
  6. #6
    Feb 03, 2012, 4:54 PM
    I guess you should wrap the user control's content in a respective layout control, probably, an <ext:FitLayout> one.

    Please follow to investigate the difference between Items and Content.
    http://forums.ext.net/showthread.php...ll=1#post36120
  7. #7
    Feb 03, 2012, 5:34 PM
    Hi Daniil,

    Here's the faulty code. Where would you recommend to put the FitLayout?

    Thanks,

    Vadym

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport ID="Viewport1" runat="server">
        <Content>
            <ext:Panel runat="server" ID="PanelFormContainer" AutoScroll="true" Border="false"
                Frame="false">
                <Items>
                    <ext:FormPanel ID="FormPanelUserSearch" runat="server" Icon="User" Frame="true" LabelAlign="Left"
                        Height="120" Width="825" Title="">
                        <Items>
                            <ext:CompositeField ID="CompositeField1" runat="server" FieldLabel="Search For">
                                <Items>
                                    <ext:ComboBox runat="server" ID="ComboNameType" Editable="false" SelectOnFocus="true"
                                        SelectedIndex="0" Width="120">
                                        <Items>
                                            <ext:ListItem Text="Person" Value="0" />
                                            <ext:ListItem Text="Organization" Value="1" />
                                        </Items>
                                    </ext:ComboBox>
                                    <ext:DisplayField ID="DisplayField1" runat="server" Width="10">
                                    </ext:DisplayField>
                                    <ext:DisplayField ID="DisplayField2" runat="server" Text="Last&nbsp;Name:" Width="90">
                                    </ext:DisplayField>
                                    <ext:TextField ID="TextLastName" runat="server" Width="186" />
                                    <ext:DisplayField ID="DisplayField3" runat="server" Width="10">
                                    </ext:DisplayField>
                                    <ext:DisplayField ID="DisplayField4" runat="server" Text="First&nbsp;Name:" Width="90">
                                    </ext:DisplayField>
                                    <ext:TextField ID="TextFirstName" runat="server" Width="186" />
                                </Items>
                            </ext:CompositeField>
                            <ext:CompositeField ID="CompositeField2" runat="server">
                                <Items>
                                    <ext:DisplayField ID="DisplayField5" runat="server" Width="135">
                                    </ext:DisplayField>
                                    <ext:DisplayField ID="DisplayField6" runat="server" Width="90" Text="User&nbsp;Type:">
                                    </ext:DisplayField>
                                    <ext:ComboBox runat="server" ID="ComboNameClass" Editable="false" SelectOnFocus="true"
                                        SelectedIndex="0" Width="186">
                                        <Store>
                                        </Store>
                                        <Items>
                                        </Items>
                                    </ext:ComboBox>
                                </Items>
                            </ext:CompositeField>
                        </Items>
                        <Buttons>
                            <ext:Button ID="ButtonSearch" runat="server" Text="Search" Icon="UserMagnify">
                            </ext:Button>
                            <ext:Button ID="ButtonReset" runat="server" Text="Reset" Width="80">
                            </ext:Button>
                        </Buttons>
                    </ext:FormPanel>
                    <ext:FormPanel ID="FormPanelUserAdd" runat="server" Icon="User" Frame="true" LabelAlign="Left"
                        Hidden="true" Height="120" Width="825" Title="">
                        <Items>
                            <ext:CompositeField ID="CompositeField3" runat="server" FieldLabel="Search For (H)">
                                <Items>
                                    <ext:ComboBox runat="server" ID="ComboBox1" Editable="false" SelectOnFocus="true"
                                        SelectedIndex="0" Width="120">
                                        <Items>
                                            <ext:ListItem Text="Person" Value="0" />
                                            <ext:ListItem Text="Organization" Value="1" />
                                        </Items>
                                    </ext:ComboBox>
                                    <ext:DisplayField ID="DisplayField7" runat="server" Width="10">
                                    </ext:DisplayField>
                                    <ext:DisplayField ID="DisplayField8" runat="server" Text="Last&nbsp;Name&nbsp;(H):"
                                        Width="90">
                                    </ext:DisplayField>
                                    <ext:TextField ID="TextField1" runat="server" Width="186" />
                                    <ext:DisplayField ID="DisplayField9" runat="server" Width="10">
                                    </ext:DisplayField>
                                    <ext:DisplayField ID="DisplayField10" runat="server" Text="First&nbsp;Name&nbsp;(H):"
                                        Width="90">
                                    </ext:DisplayField>
                                    <ext:TextField ID="TextField2" runat="server" Width="186" />
                                </Items>
                            </ext:CompositeField>
                            <ext:CompositeField ID="CompositeField4" runat="server">
                                <Items>
                                    <ext:DisplayField ID="DisplayField11" runat="server" Width="135">
                                    </ext:DisplayField>
                                    <ext:DisplayField ID="DisplayField12" runat="server" Width="90" Text="User&nbsp;Type&nbsp;(H):">
                                    </ext:DisplayField>
                                    <ext:ComboBox runat="server" ID="ComboBox2" Editable="false" SelectOnFocus="true"
                                        SelectedIndex="0" Width="186">
                                        <Items>
                                            <ext:ListItem Text="Item1" Value="0" />
                                            <ext:ListItem Text="Item2" Value="1" />
                                        </Items>
                                    </ext:ComboBox>
                                </Items>
                            </ext:CompositeField>
                        </Items>
                        <Buttons>
                            <ext:Button ID="Button1" runat="server" Text="Search" Icon="UserMagnify">
                            </ext:Button>
                            <ext:Button ID="ButtonCancel" runat="server" Text="Cancel" Width="80">
                                <Listeners>
                                    <Click Handler="#{FormPanelUserAdd}.setVisible(false);#{FormPanelUserSearch}.setVisible(true);#{PanelGridContainer}.setVisible(true);#{Viewport1}.doLayout();" />
                                </Listeners>
                            </ext:Button>
                        </Buttons>
                    </ext:FormPanel>
                </Items>
            </ext:Panel>
            <ext:Panel runat="server" ID="PanelGridContainer" AutoScroll="true" Border="false"
                Layout="FitLayout" Frame="false">
                <Items>
                    <ext:GridPanel ID="GridPanelNameSearch" runat="server" Height="390" AutoWidth="true"
                        AutoScroll="true" Title="" Border="true">
                        <Store>
                            <ext:Store ID="StoreNameSearch" runat="server">
                                <Reader>
                                    <ext:JsonReader>
                                        <Fields>
                                            <ext:RecordField Name="FullName" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <TopBar>
                            <ext:Toolbar ID="Toolbar1" runat="server">
                                <Items>
                                    <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Html="<b>&nbsp;Search Results:</b>">
                                    </ext:ToolbarTextItem>
                                    <ext:ToolbarSpacer Width="20">
                                    </ext:ToolbarSpacer>
                                    <ext:Button ID="ButtonSelect" runat="server" Icon="Accept" Text="Select" Width="80"
                                        ToolTip="Select User" Disabled="true">
                                        <Listeners>
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonNew" runat="server" Icon="UserAdd" Text="Add" Width="80" ToolTip="Add New User">
                                        <Listeners>
                                            <Click Handler="#{FormPanelUserAdd}.setVisible(true);#{FormPanelUserSearch}.setVisible(false);#{PanelGridContainer}.setVisible(false);#{Viewport1}.doLayout();" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ID="ButtonEdit" runat="server" Icon="UserEdit" Text="Edit" Width="80"
                                        ToolTip="Edit User">
                                        <Listeners>
                                        </Listeners>
                                    </ext:Button>
                                    <ext:ToolbarFill ID="ToolbarFill1" runat="server">
                                    </ext:ToolbarFill>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <ColumnModel runat="server" ID="ColumnModel1">
                            <Columns>
                                <ext:Column ColumnID="FullName" Header="Full Name" DataIndex="FullName" Width="220" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" SingleSelect="true" ID="RowSelectionModel1">
                            </ext:RowSelectionModel>
                        </SelectionModel>
                        <LoadMask ShowMask="true" />
                        <BottomBar>
                            <ext:PagingToolbar runat="server" StoreID="StoreNameSearch" PageSize="10" ID="PagingToolbar1">
                                <Items>
                                    <ext:ToolbarTextItem ID="ToolbarTextItem2" runat="server" Text="&nbsp;Page size:&nbsp;">
                                    </ext:ToolbarTextItem>
                                    <ext:ComboBox ID="ComboPageSize" runat="server" Editable="false" AutoWidth="true"
                                        DisplayField="PageSize" ValueField="PageSize" Disabled="false" Width="50" SelectOnFocus="true"
                                        AutoPostBack="false">
                                        <Store>
                                        </Store>
                                    </ext:ComboBox>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Panel>
        </Content>
    </ext:Viewport>
    </form>
</body>
</html>
  8. #8
    Feb 03, 2012, 5:54 PM
    Well, I can't see a user control. Never mind.

    You have not specified a Layout for Viewport, so, there is "auto" layout. It might not suite your needs.

    If I correctly understand the requirement you should use CardLayout.
    https://examples1.ext.net/#/Layout/CardLayout/Basic/

    If you could provide us with a mockup/description of the layout you need, we might give more concrete recommendations.
  9. #9
    Feb 03, 2012, 6:03 PM
    Quote Originally Posted by Daniil View Post
    Well, I can't see a user control. Never mind.

    You have not specified a Layout for Viewport, so, there is "auto" layout. It might not suite your needs.

    If I correctly understand the requirement you should use CardLayout.
    https://examples1.ext.net/#/Layout/CardLayout/Basic/

    If you could provide us with a mockup/description of the layout you need, we might give more concrete recommendations.
    User control by itself doesn't cause the issue. It's the <Content> element that's at fault. Replace it with <Items> and the problem is gone. I'm not sure what's the Layout type that I should use. All I need is default display and auto-scrolling functionality. Maybe, "auto" is good enough. Please suggest where to put it.

    Thanks,

    Vadym
  10. #10
    Feb 03, 2012, 6:30 PM
    Well, this way:

    Example
    <ext:Viewport runat="server">
    <Content>
        <ext:ContainerLayout runat="server">
            <Items>
                
            </Items> 
        </ext:ContainerLayout>
    </Content>
</ext:Viewport>
    But again you will need to use ContainerLayout's Items.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Hiding and Unhiding a checkbox via a direct event. Pretty sure this used to work.
    By garrisrd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 07, 2011, 9:09 PM
  2. Problem in Enable panel on client side
    By Rupesh in forum 1.x Help
    Replies: 1
    Last Post: Dec 15, 2010, 2:44 PM
  3. [CLOSED] Unhiding a Hidden Panel
    By garrisrd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 27, 2010, 6:28 PM
  4. Form Panel Client Validation Problem
    By vivekrane1986 in forum 1.x Help
    Replies: 0
    Last Post: Jun 18, 2010, 9:26 AM
  5. [CLOSED] Problem in Hiding Row Grid Panel
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 12, 2010, 2:09 PM

Posting Permissions