PDA

View Full Version : Full width ext:TextArea ??



t0ny
Jul 11, 2008, 6:05 AM
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>

Timothy
Jul 11, 2008, 8:00 AM
You should place your ExtJS:TextArea inside a ExtJS:FullLayout control inside the South region.

Cheers,
Timothy

t0ny
Jul 11, 2008, 8:15 AM
I don't have FullLayout available only the FitLayout, which did not work?

Timothy
Jul 11, 2008, 10:17 AM
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>

t0ny
Jul 11, 2008, 10:45 AM
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>

t0ny
Jul 11, 2008, 10:50 AM
Ignore that...

However,

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

t0ny
Jul 11, 2008, 11:10 AM
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!

Timothy
Jul 11, 2008, 11:48 AM
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

Vladimir
Jul 11, 2008, 12:03 PM
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

geoffrey.mcgill
Jul 15, 2008, 7:43 PM
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.