[CLOSED] [1.0] Resize Border layout issues

  1. #1

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

    <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>
  2. #2

    RE: [CLOSED] [1.0] Resize Border layout issues

    Hi Ashton,

    Does setting Layout="fit" on your Panel9 help?


    You might need to break this down into smaller questions. I read though your post a couple times, but I'm still not 100% sure what functionality you would like to achieve.


    Hope this helps.


    Geoffrey McGill
    Founder
  3. #3

    RE: [CLOSED] [1.0] Resize Border layout issues

    Hi Ashton,

    We have some new features we'll commit tomorrow that should help with your scenario. Please stay tuned.


    Geoffrey McGill
    Founder
  4. #4

    RE: [CLOSED] [1.0] Resize Border layout issues

    Hi,

    Please update from SVN first.

    1. If you need to have North region which has height equals image's height then use Complete event of the image and call doLayout of the ViewPort
    <North Collapsible="False" Split="False">
        <ext:Panel Border="false" ID="Panel1" runat="server" AutoHeight="true">
            <Items>
                <ext:Image runat="server" ImageUrl="mockup2.jpg" MonitorComplete="true" MonitorPoll="10">
                    <Listeners>
                        <Complete Handler="Viewport1.doLayout();" />
                    </Listeners>
                </ext:Image>
            </Items>
        </ext:Panel>
    </North>
    2. To allowing image scrolling in the center region you have to
    - Add Layout="Fit" for the Panel9
    - Remove AutoHeight="true" for Panel10

    We made some improvements for Image control:
    - Image:
    - New Event: Complete
    Fires after the image is loaded (fires if MonitorComplete="true").

    - New Property: AllowPan
    true to allow scroll the image by mouse dragging

    - New Property: LazyLoad
    true to load image after rendering only (useful if require to defer image loading if image inside inactive tab)

    - New Property: MonitorComplete
    true to monitor complete state and fire Complete event

    - New Property: MonitorPoll
    The milliseconds to poll complete state, ignored if MonitorComplete is not true (defaults to 200)

    - New Property: Resizable
    true to allow resize the image

    - New Property: ResizeConfig

    Examples with new features will be added tomorrow
  5. #5

    RE: [CLOSED] [1.0] Resize Border layout issues

    Great news. Like the enhancements that i have read here.

    I think this is all good stuff.

    I am testing it now but can already use my images better. Greatly appreciated.

    Thanks,

    Ashton
  6. #6

    RE: [CLOSED] [1.0] Resize Border layout issues

    I think that is still a bit buggy.

    I will try to explain and you can tell me if I am implementing wrong.
    <ext:Image Resizable="true" StyleSpec="" ID="overviewmap" runat="server" ImageUrl="SewerShedImages/Citywide_Sewersheds.png">
                                                        <ResizeConfig PreserveRatio="true" EnabledResizing="true">
                                                        </ResizeConfig>
                                                        </ext:Image>
    This allows me to get the resize around the image and works. If ALLOWPAN is set to true though the resize area shows up below the image. Hard to show a screen shot because my images are large.

    However.

    if i add an anchor layout around my image where resize is false i achieve my startup look that i want for the page (IMG2.PNG), if i then set resizeable=true the image is at its full size and the resize region is what i would expect (IMG1.PNG). my goal is to have the image start up like it is in IMG2 but be resizable. I have not tried swapping the image but eventually i need to swap out the image with another based on selections from the three different parameters and the images could all be of a different size and ratio (gwynns falls.png is an example of a swap):

    <ext:AnchorLayout runat="server">
                                                        <Anchors>
                                                            <ext:Anchor Vertical="95%">
                                                                <ext:Image Resizable="false" ID="Image1" runat="server" ImageUrl="SewerShedImages/Citywide_Sewersheds.png">
                                                            <ResizeConfig Animate="true" PreserveRatio="true" EnabledResizing="true">
                                                            </ResizeConfig>
                                                            </ext:Image>
                                                            </ext:Anchor>
                                                        </Anchors>
                                                    </ext:AnchorLayout>
  7. #7

    RE: [CLOSED] [1.0] Resize Border layout issues

    Hi,

    If you use AllowPan then you have to provide Width and Height for Image which less then real image's size (or use layout, for example place image inside fit layout)


    I don't recomend to place resizable image inside layout which change image's size (otherwise you will have size conflict)
    Please provide your current configuration which shows your current issues (just hard to understand by text description only)
  8. #8

    RE: [CLOSED] [1.0] Resize Border layout issues

    I don't know how to get my point across without giving out the link to the site and walking you through the scenario there.

    We are racking our brains over it here.

    I could try and say this:
    If you load an image that is 2000x1000
    the image state says width=2000 height=1000 in firebug which is ok.

    But,

    #{Image1}.setImageUrl('some url not of the same aspect ratio');

    results in:

    new image that is not of the same aspect ratio it stretches and distorts the image (so an 1000x 1000 image is now set to same ratio of the 2000x1000 image because it was the first one loaded).

    #{Image1}.setImageUrl('some url not of the same aspect ratio'); #{Image1}.setWidth(somewidth);#{Image1}.setHeight( someheight);

    results in:
    new image that is now oversized in the viewable area and loses it anchoring specifications.

    If you are using the a fore mentioned to try and anchor the image and reduce the size so that is is always Fully viewable to the user and swap the image with setImageUrl then try and manually adjust the height and width with your setWidth and setHeight Methods in javascript the image is expanded to the true size of the image and not the Viewable area that was set on the first load and when you just swap with "setImageUrl".



    Initialization of the first image loaded is with: (the result is IMG2.PNG)
    <ext:AnchorLayout runat="server">
                                                        <Anchors>
                                                            <ext:Anchor Vertical="95%">
                                                                <ext:Image ID="Image1" runat="server" ImageUrl="SewerShedImages/Citywide_Sewersheds.png">
                                                            </ext:Image>
                                                            </ext:Anchor>
                                                        </Anchors>
                                                    </ext:AnchorLayout>
    Again more than willing to publish or walk through this with you but this is difficult for me to convey everything with out you using all the same scenarios.

    Please contact me privately and I will set up a link.

  9. #9

    RE: [CLOSED] [1.0] Resize Border layout issues

    How about setting the width/height of the new image based on the size (and ratio) of the parent Panel/Container?

    Please feel free to email me directly (geoff@object.net).


    Geoffrey McGill
    Founder
  10. #10
    I have similar issue. I'm trying to use pan to move image inside of panel and do resizing using buttons, but it doesn't work. Probably I have something wrong in config:
     var resize = function(image, factor) {
                if (!factor) {
                    return;
                }
    
                var orgSize = image.getOriginalSize();
    
                factor = parseFloat(factor);
                image.setSize(parseInt(orgSize.width * factor), parseInt(orgSize.height * factor));
            }
    
    .....
     <ext:Panel ID="pnlMain" runat="server" Width="800" Height="600" Shadow="None" Layout="Fit">
            <TopBar>
                <ext:Toolbar ID="mainToolbar" runat="server" Flat="true">
                      <Items>
                         <ext:Button ID="btnFull" runat="server" Icon="Zoom">
                            <Listeners>
                                <Click Handler="resize(#{imBtnMain},1)" />
                            </Listeners>
                            <ToolTips>
                                <ext:ToolTip ID="btnFullToolTip" runat="server" Html="Full Page" />
                            </ToolTips>
                        </ext:Button>
                        <ext:Button ID="btnZoomIn" runat="server" Icon="ZoomIn">
                            <Listeners>
                                <Click Handler="resize(#{imBtnMain},2)" />
                            </Listeners>
                            <ToolTips>
                                <ext:ToolTip ID="btnZoomInToolTip" runat="server" Html="Zoom In Page" />
                            </ToolTips>
                        </ext:Button>
                        <ext:Button ID="btnZoomOut" runat="server" Icon="ZoomOut">
                            <Listeners>
                                <Click Handler="resize(#{imBtnMain},0.5)" />
                            </Listeners>
                            <ToolTips>
                                <ext:ToolTip ID="btnZoomOutToolTip" runat="server" Html="Zoom Out Page" />
                            </ToolTips>
                        </ext:Button>
                        </Items>
                </ext:Toolbar>
                 </TopBar>
                  <Items>
                <ext:Image ID="imBtnMain" ImageUrl="~/resources/images/Error.jpg" runat="server"
                    AllowPan="true">
                    <ResizeConfig ID="resizeConfig" PreserveRatio="true" EnabledResizing="true" runat="server" />
                </ext:Image>
            </Items>
        </ext:Panel>

Similar Threads

  1. [CLOSED] Portal Layout Resize Issues
    By Patrick_G in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 18, 2013, 3:50 AM
  2. Replies: 3
    Last Post: Mar 11, 2010, 10:54 AM
  3. [CLOSED] Border Layout percentage
    By GmServizi in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 22, 2009, 7:51 AM
  4. [CLOSED] Need help with Border layout
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 29, 2009, 9:05 AM
  5. Border Layout
    By oskarni in forum 1.x Help
    Replies: 7
    Last Post: Apr 10, 2008, 9:19 PM

Posting Permissions