What's New?

Can't have a ViewPort inside a div

  1. #1
    Jan 08, 2011, 3:12 PM

    Can't have a ViewPort inside a div

    Hi guys, I wanted to create a master page with 2 divs, left and right and on the child pages I needed a viewport with NORTH and SOUTH panels streched all the way while the left bar has a static width of 200px but the viewport is always taking the whole page and breaks my left div, how can I accomplish something like this?
    Thanks
  2. #2
    Jan 08, 2011, 5:39 PM
    Hi paul-2011,

    The role of the <ext:Viewport> is to fill the entire "viewport", ie... browser window. There may only be one Viewport created in a page.

    More info

    http://dev.sencha.com/deploy/dev/doc...s=Ext.Viewport
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jan 08, 2011, 6:53 PM
    Quote Originally Posted by geoffrey.mcgill View Post
    Hi paul-2011,

    The role of the <ext:Viewport> is to fill the entire "viewport", ie... browser window. There may only be one Viewport created in a page.

    More info

    http://dev.sencha.com/deploy/dev/doc...s=Ext.Viewport
    Thanks Geoffrey, the RowLayout seems to do the job for me but another issue was raised, whenever I drop a TreePanel on the West region the Center region gets screwed, I've attached a sample if you could take a look please.
    Attached Files
  4. #4
    Jan 08, 2011, 7:16 PM
    Quote Originally Posted by paul-2011 View Post
    Thanks Geoffrey, the RowLayout seems to do the job for me but another issue was raised, whenever I drop a TreePanel on the West region the Center region gets screwed, I've attached a sample if you could take a look please.
    This doesn't work as well, see screenshot attached:


    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
   <form id="frmMain" runat="server">
   <ext:ResourceManager ID="ResourceManager1" runat="server">
   </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server" Layout="border">
        <Items>
            <ext:Panel ID="pnlNavBar" runat="server" Collapsible="true" Layout="accordion" Region="West"
                Split="true" Title="Renewals" Width="175">
                <Items>
                    <ext:TreePanel ID="pnlLists" runat="server" Border="false" Collapsed="false" Icon="FolderGo"
                        Title="TITLE">
                            
                            </ext:TreePanel>
                    <ext:Panel ID="Panel8" runat="server" Border="false" Collapsed="true" Icon="FolderWrench"
                        Title="Preferences">
                        <Items>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
            <ext:Panel ID="pnlBody" runat="server" Layout="Fit" Region="Center" Title="" Padding="10">
                <Content>
                    HTML Stuff
                </Content>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Attached Thumbnails Click image for larger version.  Name: shot.jpg  Views: 212  Size: 7.8 KB  ID: 2131  
  5. #5
    Jan 08, 2011, 9:30 PM
    Hi,

    You just need to define a <Root> item for the TreePanel. I'll look into removing this requirement, but for now it stands.

    Example

    <ext:TreePanel 
    runat="server" 
    Border="false" 
    Collapsed="false" 
    Icon="FolderGo"
    Title="TITLE">
    <Root>
        <ext:TreeNode Text="Item1" />
    </Root>    
</ext:TreePanel>
    Hope this helps.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  6. #6
    Jan 08, 2011, 9:31 PM
    Another minor point, although it does not affect your sample... if you configure the <Content> region with just raw HTML, you do not require the .Layout property. In your <Center> Panel, you can remove the Layout="Fit" config item.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Jan 09, 2011, 11:44 AM
    Thanks Geoffrey, that worked like a charm, you are simply the best ;)
    The only issue that I'v noticed now is that the second panel, "Preferences" doesn't show on the bottom when the first panel is collapsed, if I unfold the first panel the second panel will show or if I resize the window the second panel shows temporarily.
    Last edited by paul-2011; Jan 09, 2011 at 11:47 AM.

Similar Threads

  1. viewport inside panel
    By UserClarion in forum 1.x Help
    Replies: 6
    Last Post: Jun 29, 2012, 7:17 AM
  2. [CLOSED] Fitlayout inside a viewport
    By critt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 16, 2012, 7:45 AM
  3. DraggableConfig inside ViewPort gives error
    By Prithviholla in forum 1.x Help
    Replies: 0
    Last Post: Oct 28, 2011, 11:17 AM
  4. [CLOSED] Layout School Part I: GridPanels inside a TabPanel inside a ViewPort
    By wagger in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 18, 2011, 7:06 PM
  5. Is it possible to design ext.net controls inside table without using viewport
    By eldhose in forum 1.x Help
    Replies: 1
    Last Post: Jan 27, 2011, 1:13 PM

Posting Permissions