Can I stretch a TextArea control inside a Panel?

  1. #1

    Can I stretch a TextArea control inside a Panel?

    Hi, I'm trying without any luck to make a TextArea control to fill the contents of a Panel (width and height), is there a trick to do that?
    Thanks,
    Paul

    <ext:Viewport ID="Viewport1" runat="server" Layout="Row">
            <Items>
                <ext:TabPanel ID="TabPanel1" runat="server" Height="300">
                    <Items>
                        <ext:Panel ID="Panel1" runat="server" Title="Panel 1">
                            <Items>
                                <ext:TextArea ID="edtText" runat="server"></ext:TextArea>
                            </Items>
  2. #2
    Hi,

    You can set Layout="fit" on the parent container.

    Example

    <ext:Panel ID="Panel1" runat="server" Title="Panel 1" Layout="fit">
    Hope this helps.
    Geoffrey McGill
    Founder
  3. #3
    Quote Originally Posted by geoffrey.mcgill View Post
    Hi,

    You can set Layout="fit" on the parent container.

    Example

    <ext:Panel ID="Panel1" runat="server" Title="Panel 1" Layout="fit">
    Hope this helps.
    Awesome, also I have a ViewPort with 2 Panels, the first Panel has the height set to 300 and the second one I would like to stretch to the remaining height of the page, I tried different layouts with the ViewPort but the Panel on top always stretches to fit the page and the second Panel doesn't show up.
    Thanks Geoffrey


    Click image for larger version. 

Name:	01.jpg 
Views:	280 
Size:	13.4 KB 
ID:	1521

    Click image for larger version. 

Name:	02.jpg 
Views:	257 
Size:	14.2 KB 
ID:	1522
  4. #4
    Quote Originally Posted by paul-2011 View Post
    Awesome, also I have a ViewPort with 2 Panels, the first Panel has the height set to 300 and the second one I would like to stretch to the remaining height of the page, I tried different layouts with the ViewPort but the Panel on top always stretches to fit the page and the second Panel doesn't show up.
    Thanks Geoffrey
    Sounds like a job for BorderLayout.

    Set the .Height of the <North> Panel to 300, and the <Center> will fill the remaining space.

    Hope this helps.
    Geoffrey McGill
    Founder
  5. #5
    Quote Originally Posted by geoffrey.mcgill View Post
    Sounds like a job for BorderLayout.

    Set the .Height of the <North> Panel to 300, and the <Center> will fill the remaining space.

    Hope this helps.
    and it certainly was, thanks Geoffrey, just some notes:


    • On the TabPanel the properties MinTabWidth and TabWidth did not work, I tried to set the width to have all tabs to be the same size but it didn't work.
    • I can't make the TextArea fit the width of the tab container anymore, not a problem when the North panel remains the same size but if I resize it the TextArea will appear shorter.
    • The GridPanel is not binding on-the-fly, but that's another topic that I have open.

    Thanks,
    Paul

    <ext:Viewport ID="Viewport1" runat="server">
            <Content>
                <ext:BorderLayout runat="server">
                    <North Split="true" Collapsible="true">
                        <ext:Panel ID="Panel1" runat="server" Title="Management Studio" Height="300" >
                            <Items>
                                <ext:TabPanel ID="TabPanel1" runat="server">
                                    <Items>
                                        <ext:Panel ID="Panel2" runat="server" Title="SQL" Layout="Fit">
                                            <Items>
                                                <ext:TextArea ID="edtSQL" runat="server" Height="194"></ext:TextArea>
                                            </Items>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel3" runat="server" Title="History">
                                            <Items>
                                            </Items>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel4" runat="server" Title="Options">
                                            <Items>
                                            </Items>
                                        </ext:Panel>
                                    </Items>
                                </ext:TabPanel>
                            </Items>
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                    <ext:ComboBox ID="edtDatabase" runat="server" FieldLabel="Connection" Width="200" LabelWidth="70" SelectedIndex="0">
                                        <Items>
                                            <ext:ListItem Text="" Value="" />
                                        </Items>
                                    </ext:ComboBox>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                            <BottomBar>
                            <ext:Toolbar ID="Toolbar1" runat="server">
                                <Items>
                                    <ext:Button ID="Button1" Icon="LightningGo" Text="Execute" runat="server">
                                        <DirectEvents>
                                            <Click OnEvent="btSubmit_Click">
                                                <EventMask ShowMask="true" />
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:Button ID="Button2" Icon="ScriptGo" Text="Query" runat="server">
                                        <DirectEvents>
                                            <Click OnEvent="btQuery_Click">
                                                <EventMask ShowMask="true" />
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
                        </ext:Panel>
                    </North>
                    <Center>
                        <ext:Panel runat="server" Title="Data" >
                            <BottomBar>
                                <ext:StatusBar runat="server">
                                    <Items>
                                        <ext:Label ID="lblMessage" runat="server" Text=""></ext:Label>
                                    </Items>
                                </ext:StatusBar>
                            </BottomBar>
                        </ext:Panel>                    
                    </Center>                
                </ext:BorderLayout>
            </Content>
        </ext:Viewport>
  6. #6
    1. You can set .ResizeTabs="true" on the TabPanel. This is required for .MinTabWidth. See docs...

    http://dev.sencha.com/deploy/dev/doc...er=minTabWidth

    2. You didn't set .Layout="fit" on "Panel1". And, you should remove the .Height property on the <ext:TextArea> as it's not required.

    3. ok.

    Hope this helps.
    Geoffrey McGill
    Founder
  7. #7
    Quote Originally Posted by geoffrey.mcgill View Post
    1. You can set .ResizeTabs="true" on the TabPanel. This is required for .MinTabWidth. See docs...

    http://dev.sencha.com/deploy/dev/doc...er=minTabWidth

    2. You didn't set .Layout="fit" on "Panel1". And, you should remove the .Height property on the <ext:TextArea> as it's not required.

    3. ok.

    Hope this helps.
    Good morning Geoffrey


    1. You were right about ResizeTabs however by setting MinTabWidth to 70px it makes all tabs 120px wide, then if I set the TabWidth property to a desired width it defeats the purpose of using MinTabWidth since the tab width won't grow to accommodate the text.
    2. I thought the inner control for the TextArea was Panel2 but anyways I set Panel1 to Fit layout and removed the TextArea height and it had no effect.

    Could you change the code I posted and you tested on your machine and paste it here again please?
    Thanks a lot,
    Paul
  8. #8
    Got number 2 fixed...


    1. You were right about ResizeTabs however by setting MinTabWidth to 70px it makes all tabs 120px wide, then if I set the TabWidth property to a desired width it defeats the purpose of using MinTabWidth since the tab width won't grow to accommodate the text.
    2. I thought the inner control for the TextArea was Panel2 but anyways I set Panel1 to Fit layout and removed the TextArea height and it had no effect.

Similar Threads

  1. Click on div inside panel control
    By Vaishali in forum 1.x Help
    Replies: 2
    Last Post: Jan 27, 2012, 6:30 AM
  2. Replies: 4
    Last Post: Oct 11, 2011, 2:14 AM
  3. [CLOSED] Not stretch User Control in Tab panel
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 28, 2011, 8:23 AM
  4. Replies: 19
    Last Post: May 18, 2011, 4:45 PM
  5. Replies: 2
    Last Post: Apr 23, 2009, 5:49 PM

Posting Permissions