Full width ext:TextArea ??

  1. #1

    Full width ext:TextArea ??

    Hi there,

    I am using the viewport control and in the south panel I would like an ext:TextArea to fill the whole panel (as I need the text here to be updateable). Can anyone tell me how to acheive this as the width property only accepts a pixel measurement? and AutoWidth does not seem to do anything. I have tried FitLayout too without much luck.

    Thanks
    Tony

    
    
    
    <South Collapsible="True" Split="True" MaxHeight="200px" MinHeight="200px" >
    <ext:Panel ID="SouthPanel" Icon="comments" runat="server" Title="Site Comments" Height="200px"  Comments" BodyStyle="padding:0px;" AutoScroll="True" >
    <Content>
    <ext:TextArea StyleSpec="display:inline;" ID="SiteCommentsTextArea" Height="128px" AutoWidth="true" runat="server">
    </ext:TextArea>
    </Content>
    <Buttons><ext:Button ID="EditSiteCommentsButton" Icon="commentedit" StyleSpec="display:inline;" runat="server" Text="Edit Comments">
    </ext:Button>
    </Buttons>
    </ext:Panel>
    </South>
  2. #2

    RE: Full width ext:TextArea ??

    You should place your ExtJS:TextArea inside a ExtJS:FullLayout control inside the South region.

    Cheers,
    Timothy
  3. #3

    RE: Full width ext:TextArea ??

    I don't have FullLayout available only the FitLayout, which did not work?
  4. #4

    RE: Full width ext:TextArea ??

    Oops, sorry was an early morning post :)

    Use the AnchorLayout:

            <ExtJS:ViewPort runat="server" AutoHeight="True" AutoWidth="True" MonitorResize="True" Stateful="True">
                <Content>
                    <ExtJS:BorderLayout ID="BorderLayout1" runat="server" RenderHidden="True">
                        <Center Collapsible="False" CollapseMode="Mini" Split="True">
                            <ExtJS:Panel runat="server">
                                <Content>
                                    <ExtJS:AnchorLayout ID="AnchorLayout1" runat="server">
                                        <ExtJS:Anchor Horizontal="100">
                                            <ExtJS:HtmlEditor runat="server" AutoHeight="True" />
                                        </ExtJS:Anchor>
                                    </ExtJS:AnchorLayout>
                                </Content>
                            </ExtJS:Panel>
                        </Center>
                    </ExtJS:BorderLayout>
                </Content>
            </ExtJS:ViewPort>
  5. #5

    RE: Full width ext:TextArea ??

    Can't get that to work, says:

    Multiple controls with the same ID 'ctl10' were found. FindControl requires that controls have unique IDs.

    Nothing here has used id's and I know it is the ext:panel that is causing the problem!?!?





    <ext:AnchorLayout ID="AnchorLayout1" runat="server">
    <ext:Anchor HorizontalAnchor="100">
    <ext:Panel ID="panel667123456716252" runat="server" Title="Options">
    <Content></Content>
    </ext:Panel>
    </ext:Anchor>
    </ext:AnchorLayout>
  6. #6

    RE: Full width ext:TextArea ??



    Ignore that...

    However,

    With the anchor stuff set-up, I still have a textarea that will not fill the bottom panel?
  7. #7

    RE: Full width ext:TextArea ??

    I put StyleSpec="width:98%;" in the ext:TextArea, which seems to have sorted my problem. Not sure if there is a better way, but I am happy for now!
  8. #8

    RE: Full width ext:TextArea ??

    StyleSpec will do it as well ;)

    I prefer AnchorLayout over variable heights and widths because some browsers are quirky when it comes to percents!

    Cheers,
    Timothy
  9. #9

    RE: Full width ext:TextArea ??

    Hi all,

    I can suggest another solution (you can using this solution or StyleSpec)

    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Coolite.Sandbox.Temp.Percentage100.Default" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server">
        </ext:ScriptManager>
        <ext:ViewPort ID="ViewPort1" runat="server">
            <Content>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <South Collapsible="True" Split="True" MaxHeight="200px" MinHeight="200px">
                        <ext:Panel ID="SouthPanel" Icon="comments" runat="server" Title="Site Comments" Height="200px"
                            BodyStyle="padding:5px;" AutoScroll="True">
                            <Content>
                                   <ext:TextArea StyleSpec="display:inline;" ID="SiteCommentsTextArea" Height="125px" AutoWidth="true" runat="server">
                                        <Listeners>
                                            <Resize Handler="el.getEl().setStyle('width', Ext.getCmp('{SouthPanel}').getInnerWidth()-20);" />
                                        </Listeners>
                                   </ext:TextArea>
                            </Content>
                            <Buttons>
                                <ext:Button ID="EditSiteCommentsButton" Icon="commentedit" StyleSpec="display:inline;"
                                    runat="server" Text="Edit Comments">
                                </ext:Button>
                            </Buttons>
                        </ext:Panel>
                    </South>
                    <Center>
                        <ext:Panel ID="Panel7" runat="server" Title="Center">
                            <Content>
                                Center
                            </Content>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Content>
        </ext:ViewPort>
        </form>
    </body>
    </html>
    Vladimir
  10. #10

    RE: Full width ext:TextArea ??

    Hi t0ny,

    I was able to get the <ext:FitLayout> to work.

    The following sample demonstrates adding a <ext:FitLayout> to the <South> region and then <ext:TextArea>, see http://sandbox.ext.net/Form/TextArea/FullWidth.aspx

    Adding a simple StyleSpec to the TextArea removes the border from the TextArea. After removing the border, the TextArea appears to disappear and the complete South region becomes editable.

    The .EmptyText property adds a nice usability touch, although might not work as expected with versions earlier than 0.6.0. While building the sample I discovered and fixed a bug with the TextField/TextArea which affected the EmptyText property. I apologize for any inconveinience this may cause.

    Hope this helps.
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] Content Gridpanel does not resize back to a full width
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 28, 2011, 12:32 PM
  2. GridPanel full width
    By DavidS in forum 1.x Help
    Replies: 5
    Last Post: Nov 18, 2010, 6:15 AM
  3. Full width (%age width) ext:Panels ?
    By henricook in forum 1.x Help
    Replies: 2
    Last Post: Jun 04, 2010, 4:15 PM
  4. [CLOSED] TextArea width within editable GridPanel
    By danielg in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 18, 2009, 10:20 AM
  5. [CLOSED] ComboBox Item List not displaying full Width
    By bfolger in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 24, 2009, 10:12 PM

Posting Permissions