Jan 26, 2010, 1:07 PM
[CLOSED] [1.0] Resize Border layout issues
there is a similar topic in the forum on this but I want to expand a bit. When you add an image to the north panel of an unknown size and add an oversized image to the center panel. (2000x2000 lets say) I have unknown image sizes that are generated dynamically.
1. issue is if you load the large image into a tab in the center panel you can't get it to scroll. (ideally i wanted to use css to style the image to 95% of the height of the tab at intialization).
2. if you use css or anchor layout to try and resize the big image in the tab to try to be 95% of the height of the tab it will not render correctly. From what I can see in firebug the tab at intialization is correct with out the image loaded in the north panel. when the image in the north panel loads the tab doesn't resize it's height even with autoheight=true. Ie. if it starts at 900px and you add an image in the north of 100px; the layout looks correct but if you inspect the tab at this point it will be running off the screen.
Maybe this has always worked this way but this gets to be a very complicated problem if you start adding buttons or tools and the tab never resizes. I am sure this is how the order of objects are created but I am not finding a solution.
I have found trying to set autoheight to be somewhat helpfull but not completely.
I have tried to use anchorlayouts and containers to improve my look and have had limited success but can't get to a 100% solution.
My question is what really is the best practice to design this image container in a tab that one can be scrollable and how can you get a large image to fit within the view of the user in a tab without scrolling (trying to keep the aspect ratio).
I want to add that adding dynamic images in 0.8 was an issue too. I had to write a lot of work arounds to get panels and regeions to resize. I was hoping to see an easier solution now.
This is a sample i am working with to try and figure out a solution.
1. issue is if you load the large image into a tab in the center panel you can't get it to scroll. (ideally i wanted to use css to style the image to 95% of the height of the tab at intialization).
2. if you use css or anchor layout to try and resize the big image in the tab to try to be 95% of the height of the tab it will not render correctly. From what I can see in firebug the tab at intialization is correct with out the image loaded in the north panel. when the image in the north panel loads the tab doesn't resize it's height even with autoheight=true. Ie. if it starts at 900px and you add an image in the north of 100px; the layout looks correct but if you inspect the tab at this point it will be running off the screen.
Maybe this has always worked this way but this gets to be a very complicated problem if you start adding buttons or tools and the tab never resizes. I am sure this is how the order of objects are created but I am not finding a solution.
I have found trying to set autoheight to be somewhat helpfull but not completely.
I have tried to use anchorlayouts and containers to improve my look and have had limited success but can't get to a 100% solution.
My question is what really is the best practice to design this image container in a tab that one can be scrollable and how can you get a large image to fit within the view of the user in a tab without scrolling (trying to keep the aspect ratio).
I want to add that adding dynamic images in 0.8 was an issue too. I had to write a lot of work arounds to get panels and regeions to resize. I was hoping to see an easier solution now.
This is a sample i am working with to try and figure out a solution.
<ext:Viewport ID="Viewport1" runat="server">
<items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North Collapsible="False" Split="False">
<ext:Panel Border="false" ID="Panel1" runat="server" AutoHeight="true" BodyStyle="background-image:url('images/header_spacer.jpg');">
<Items>
<ext:Image runat="server" ImageUrl="Images/header.jpg">
</ext:Image>
</Items>
</ext:Panel>
</North>
<West>
<ext:Panel ID="Panel6" runat="server" Title="" Width="200">
<Items>
<ext:RowLayout runat="server">
<Rows>
<ext:LayoutRow>
<ext:Panel ID="SewerShed" runat="server" Border="false" Icon="FolderWrench" Title="Sewer Shed">
<Items>
<ext:FormPanel runat="server" AutoWidth="true" Border="false">
<Items>
<ext:FormLayout runat="server" LabelAlign="Top">
<Anchors>
<ext:Anchor Horizontal="95%">
<ext:ComboBox ID="ddSewerShed"
Editable="false" co
Resizable="true"
TypeAhead="true"
Mode="Local"
ForceSelection="true"
TriggerAction="All"
DisplayField="name"
ValueField="id"
EmptyText="Select a Sewershed..."
ValueNotFoundText="Loading..."
StoreID="SewerShedStore"
runat="server"
FieldLabel="Sewer Shed">
<Listeners>
<Select Handler=" #{ddBasin}.clearValue();#{BasinStore}.load();" />
</Listeners>
</ext:ComboBox>
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:ComboBox ID="ddBasin"
Editable="false"
Resizable="true"
TypeAhead="true"
Mode="Local"
ForceSelection="true" TriggerAction="All" DisplayField="name" ValueField="id"
EmptyText="Select a Basin..." ValueNotFoundText="Loading..." StoreID="BasinStore"
runat="server" FieldLabel="Basin">
<Listeners>
<Select Handler="#{ddSystem}.clearValue();#{SystemStore}.load();" />
</Listeners>
</ext:ComboBox>
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:ComboBox ID="ddSystem" Editable="false"
Resizable="true" TypeAhead="true" Mode="Local"
ForceSelection="true" TriggerAction="All" DisplayField="name"
ValueField="id" EmptyText="Select a System..."
ValueNotFoundText="Loading..." StoreID="SystemStore"
runat="server" FieldLabel="System">
</ext:ComboBox>
</ext:Anchor>
</Anchors>
</ext:FormLayout>
</Items>
<Buttons>
<ext:Button ID="btnopen" runat="server" Text="Open" Icon="ApplicationGo">
</ext:Button>
</Buttons>
</ext:FormPanel>
</Items>
<Listeners>
<Resize Handler="#{Panel6}.width=#{SewerShed}.width" />
</Listeners>
</ext:Panel>
</ext:LayoutRow>
<ext:LayoutRow RowHeight="1.0">
<ext:Panel AutoScroll="true" ID="Panel7" runat="server" Border="false" Icon="FolderGo"
Title="Reports">
<Items>
<ext:HyperLink ID="HyperLink13" runat="server" Text="All Fields By Day" StyleSpec="display:block;">
</Items>
</ext:Panel>
</ext:LayoutRow>
</Rows>
</ext:RowLayout>
<%--<ext:BorderLayout ID="BorderLayout2" runat="server">
<Center>
</Center>
<South>
</South>
</ext:BorderLayout>--%>
</Items>
</ext:Panel>
</West>
<Center>
<ext:Panel ID="Panel9" runat="server">
<Items>
<ext:TabPanel ID="TabPanel2" runat="server" ActiveTabIndex="0" Border="false" Title="Center">
<Items>
<ext:Panel AutoScroll="true" AutoHeight="true" ID="Panel10" runat="server" Closable="false" Title="Overview Map" Icon="Map">
<Items>
<ext:Image ID="overviewmap" runat="server" ImageUrl="LARGEImages/LARGE.png"></ext:Image>
</Items>
</ext:Panel>
<ext:Panel ID="Panel11" runat="server" Title="Tab 2">
<Items>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill />
<ext:Button StandOut="true" Icon="Help" Text="Help" ToolTip="Help Documentation"
runat="server">
<Listeners>
<Click />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Center>
</ext:BorderLayout>
</items>
</ext:Viewport>