What's New?

[CLOSED] Width of controls within card layout

  1. #1
    Jul 05, 2010, 1:06 PM

    [CLOSED] Width of controls within card layout

    Hello guys,

    Congratulations on this nice new forum. I'm having trouble again with the card layout.
    Widths on panels that are initially hidden will not initialize properly and thus will look weird
    until you manually resize the browser a bit.

    This in IE7 using the source I updated last friday from SVN.

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

<!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 runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<ext:ResourceManager runat="server">
		</ext:ResourceManager>
		<ext:Viewport runat="server" MonitorResize="true">
			<Items>
				<ext:BorderLayout runat="server">
					<Center>
						<ext:Panel runat="server" Unstyled="true" Layout="card" ID="CardPanel">
							<Listeners>
								<AfterRender Handler="" />
							</Listeners>
							<LayoutConfig>
								<ext:CardLayoutConfig />
							</LayoutConfig>
							<Items>
								<ext:Panel runat="server" Unstyled="true" MonitorResize="true" HideMode="Offsets"
									Html="first page. click 'show' to go to second page" ForceLayout="true" AutoDoLayout="true"
									Padding="10">
								</ext:Panel>
								<ext:Panel runat="server" Unstyled="true" MonitorResize="true" HideMode="Offsets"
									ForceLayout="true" AutoDoLayout="true" Padding="10">
									<Content>
										<ext:Panel Unstyled="true" runat="server">
											<Items>
												<ext:FieldSet Title="Fieldset" runat="server" Height="100" Layout="Anchor" Collapsible="true"
													AutoWidth="true" MonitorResize="true" AutoHeight="true">
													<Content>
														<ext:TextArea runat="server" ID="TextArea1" AnchorHorizontal="100%" />
													</Content>
												</ext:FieldSet>
												<ext:Panel runat="server" Layout="fit" Height="200" AutoWidth="false" MonitorResize="true"
													Unstyled="true" AutoDoLayout="true" AutoScroll="true">
													<Items>
														<ext:GridPanel runat="server" AutoExpandColumn="Col1" AutoDoLayout="true">
															<Store>
																<ext:Store runat="server">
																	<Reader>
																		<ext:ArrayReader>
																			<Fields>
																				<ext:RecordField Name="Col1" />
																				<ext:RecordField Name="Col2" />
																				<ext:RecordField Name="Col3" />
																			</Fields>
																		</ext:ArrayReader>
																	</Reader>
																</ext:Store>
															</Store>
															<ColumnModel>
																<Columns>
																	<ext:Column DataIndex="Col1" Header="Col1" />
																	<ext:Column DataIndex="Col2" Header="Col2" Width="240" />
																	<ext:DateColumn DataIndex="Col3" Header="Col3" Width="100" />
																</Columns>
															</ColumnModel>
															<View>
																<ext:GridView ForceFit="true" />
															</View>
															<TopBar>
																<ext:Toolbar runat="server">
																	<Items>
																		<ext:ToolbarFill runat="server" />
																		<ext:Button Text="Button" Handler="" runat="server" />
																	</Items>
																</ext:Toolbar>
															</TopBar>
														</ext:GridPanel>
													</Items>
												</ext:Panel>
											</Items>
										</ext:Panel>
									</Content>
								</ext:Panel>
							</Items>
						</ext:Panel>
					</Center>
					<East Split="true">
						<ext:Panel runat="server" Html="Click 'show' below to show the panel" Width="200">
							<Buttons>
								<ext:Button Text="show" runat="server" Handler="function(){ #{CardPanel}.layout.setActiveItem(1) }" />
							</Buttons>
						</ext:Panel>
					</East>
				</ext:BorderLayout>
			</Items>
		</ext:Viewport>
	</div>
	</form>
</body>
</html>
    I also included a screenshot.
    Attached Thumbnails Click image for larger version.  Name: widths.jpg  Views: 82  Size: 50.2 KB  ID: 1321  
    Last edited by geoffrey.mcgill; Jul 07, 2010 at 2:52 AM.
  2. #2
    Jul 05, 2010, 9:12 PM
    Hi,

    Just replace Content by Items and add to the CardPanel

    <ext:CardLayoutConfig  LayoutOnCardChange="true" />

    Here is modified sample
    <%@ Page Language="C#" ValidateRequest="false" %>

<%@ 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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager runat="server">
        </ext:ResourceManager>
        <ext:Viewport runat="server" MonitorResize="true">
            <Items>
                <ext:BorderLayout runat="server">
                    <Center>
                        <ext:Panel runat="server" Unstyled="true" Layout="card" ID="CardPanel" ActiveIndex="0">
                            <Listeners>
                                <AfterRender Handler="" />
                            </Listeners>
                            <LayoutConfig>
                                <ext:CardLayoutConfig  LayoutOnCardChange="true" />
                            </LayoutConfig>
                            <Items>
                                <ext:Panel runat="server" Unstyled="true" MonitorResize="true" HideMode="Offsets"
                                    Html="first page. click 'show' to go to second page" ForceLayout="true" AutoDoLayout="true"
                                    Padding="10">
                                </ext:Panel>
                                <ext:Panel runat="server" Unstyled="true" MonitorResize="true" HideMode="Offsets"
                                    ForceLayout="true" AutoDoLayout="true" Padding="10">
                                    <Items>
                                        <ext:Panel Unstyled="true" runat="server">
                                            <Items>
                                                <ext:FieldSet Title="Fieldset" runat="server" Height="100" Layout="Anchor" Collapsible="true"
                                                    AutoWidth="true" MonitorResize="true" AutoHeight="true">
                                                    <Content>
                                                        <ext:TextArea runat="server" ID="TextArea1" AnchorHorizontal="100%" />
                                                    </Content>
                                                </ext:FieldSet>
                                                <ext:Panel runat="server" Layout="fit" Height="200" AutoWidth="false" MonitorResize="true"
                                                    Unstyled="true" AutoDoLayout="true" AutoScroll="true">
                                                    <Items>
                                                        <ext:GridPanel runat="server" AutoExpandColumn="Col1" AutoDoLayout="true">
                                                            <Store>
                                                                <ext:Store runat="server">
                                                                    <Reader>
                                                                        <ext:ArrayReader>
                                                                            <Fields>
                                                                                <ext:RecordField Name="Col1" />
                                                                                <ext:RecordField Name="Col2" />
                                                                                <ext:RecordField Name="Col3" />
                                                                            </Fields>
                                                                        </ext:ArrayReader>
                                                                    </Reader>
                                                                </ext:Store>
                                                            </Store>
                                                            <ColumnModel>
                                                                <Columns>
                                                                    <ext:Column DataIndex="Col1" Header="Col1" />
                                                                    <ext:Column DataIndex="Col2" Header="Col2" Width="240" />
                                                                    <ext:DateColumn DataIndex="Col3" Header="Col3" Width="100" />
                                                                </Columns>
                                                            </ColumnModel>
                                                            <View>
                                                                <ext:GridView ForceFit="true" />
                                                            </View>
                                                            <TopBar>
                                                                <ext:Toolbar runat="server">
                                                                    <Items>
                                                                        <ext:ToolbarFill runat="server" />
                                                                        <ext:Button Text="Button" Handler="" runat="server" />
                                                                    </Items>
                                                                </ext:Toolbar>
                                                            </TopBar>
                                                        </ext:GridPanel>
                                                    </Items>
                                                </ext:Panel>
                                            </Items>
                                        </ext:Panel>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                    </Center>
                    <East Split="true">
                        <ext:Panel runat="server" Html="Click 'show' below to show the panel" Width="200">
                            <Buttons>
                                <ext:Button Text="show" runat="server" Handler="function(){ #{CardPanel}.layout.setActiveItem(1) }" />
                            </Buttons>
                        </ext:Panel>
                    </East>
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>
  3. #3
    Jul 06, 2010, 9:58 AM

    Thanks.

    Thanks, this works. However this was a simplified example, in our project the ext:Panels within the CardPanel

    <ext:Panel runat="server" Unstyled="true" MonitorResize="true" HideMode="Offsets"
									ForceLayout="true" AutoDoLayout="true" Padding="10">
									<Content>
    contain a usercontrol in which all the sub controls are nested. So replacing 'Content' with 'Items' will not work :(. Is there a solution?
  4. #4
    Jul 06, 2010, 10:26 AM
    Hi,

    You have to wrap user control markup by appropriate layout control. I can provide more details if you post test sample with those user controls
  5. #5
    Jul 06, 2010, 11:02 AM

    usercontrols

    Hi vladimir,

    Thanks for your help so far. Here are the test cases

    <%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register src="TestCase.ascx" tagname="TestCase" tagprefix="uc1" %>
<!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 runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<ext:ResourceManager runat="server" />
		<ext:Viewport runat="server" MonitorResize="true">
			<Items>
				<ext:BorderLayout runat="server">
					<Center>
						<ext:Panel runat="server" Unstyled="true" Layout="card" ID="CardPanel">
							<Listeners>
								<AfterRender Handler="" />
							</Listeners>
							<LayoutConfig>
								<ext:CardLayoutConfig LayoutOnCardChange="true" />
							</LayoutConfig>
							<Items>
								<ext:Panel runat="server" Unstyled="true" MonitorResize="true" HideMode="Offsets"
									Html="first page. click 'show' to go to second page" ForceLayout="true" AutoDoLayout="true"
									Padding="10">
								</ext:Panel>
								<ext:Panel runat="server" Unstyled="true" MonitorResize="true" HideMode="Offsets"
									ForceLayout="true" AutoDoLayout="true" Padding="10">
									<Content>
										<uc1:TestCase ID="TestCase1" runat="server" />
									</Content>
								</ext:Panel>
							</Items>
						</ext:Panel>
					</Center>
					<East Split="true">
						<ext:Panel runat="server" Html="Click 'show' below to show the panel" Width="200">
							<Buttons>
								<ext:Button Text="show" runat="server" Handler="function(){ #{CardPanel}.layout.setActiveItem(1) }" />
							</Buttons>
						</ext:Panel>
					</East>
				</ext:BorderLayout>
			</Items>
		</ext:Viewport>
	</div>
	</form>
</body>
</html>
    TestCase.ascx
    <%@ Control Language="C#" AutoEventWireup="true" %>
<ext:Panel Unstyled="true" runat="server">
	<Items>
		<ext:FieldSet Title="Fieldset" runat="server" Height="100" Layout="Anchor" Collapsible="true"
			AutoWidth="true" MonitorResize="true" AutoHeight="true">
			<Content>
				<ext:TextArea runat="server" ID="TextArea1" AnchorHorizontal="100%" />
			</Content>
		</ext:FieldSet>
		<ext:Panel runat="server" Layout="fit" Height="200" AutoWidth="false" MonitorResize="true"
			Unstyled="true" AutoDoLayout="true" AutoScroll="true">
			<Items>
				<ext:GridPanel runat="server" AutoExpandColumn="Col1" AutoDoLayout="true">
					<Store>
						<ext:Store runat="server">
							<Reader>
								<ext:ArrayReader>
									<Fields>
										<ext:RecordField Name="Col1" />
										<ext:RecordField Name="Col2" />
										<ext:RecordField Name="Col3" />
									</Fields>
								</ext:ArrayReader>
							</Reader>
						</ext:Store>
					</Store>
					<ColumnModel>
						<Columns>
							<ext:Column DataIndex="Col1" Header="Col1" />
							<ext:Column DataIndex="Col2" Header="Col2" Width="240" />
							<ext:DateColumn DataIndex="Col3" Header="Col3" Width="100" />
						</Columns>
					</ColumnModel>
					<View>
						<ext:GridView ForceFit="true" />
					</View>
					<TopBar>
						<ext:Toolbar runat="server">
							<Items>
								<ext:ToolbarFill runat="server" />
								<ext:Button Text="Button" Handler="" runat="server" />
							</Items>
						</ext:Toolbar>
					</TopBar>
				</ext:GridPanel>
			</Items>
		</ext:Panel>
	</Items>
</ext:Panel>
    Also included in attachment
    Attached Files
  6. #6
    Jul 06, 2010, 12:04 PM
    Hi,

    Please wrap user control markup by FitLayout
    <%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:FitLayout runat="server">
    <Items>
        <ext:Panel Unstyled="true" runat="server">
        ...
        </ext:Panel>
   </Items>
</ext:FitLayout>
  7. #7
    Jul 06, 2010, 12:32 PM
    That did it. Thank you very much!

Similar Threads

  1. set activeindex in card layout
    By maxdiable in forum 1.x Help
    Replies: 2
    Last Post: Jun 28, 2010, 10:51 AM
  2. [CLOSED] [1.0] TreeGrid AutoExpandColumn on a card layout
    By wazige in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: May 27, 2010, 4:58 AM
  3. [CLOSED] Card Layout issue
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 01, 2010, 4:43 PM
  4. [CLOSED] Panel with Layout="Card" in v 1.0
    By egodoy in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 04, 2010, 12:29 PM
  5. card layout height
    By [WP]joju in forum 1.x Help
    Replies: 1
    Last Post: Nov 04, 2009, 4:11 AM

Posting Permissions