[CLOSED] How to "maximize" TextArea?

[vadym.f]

Hi,

I have a requirement to provide a means for the user to "maximize" a TextArea so that it covers the central portion of the form panel. Above it, there're some controls that have to stay visible after maximization. Below, there's a bottom toolbar. I have several questions:

• Is there any way to make a TextArea occupy the available real estate only?
• Can it react to panel resize events accordingly?
• Is Window appropriate to implement that kind of functionality?
• If so, how to make a TextArea resize itself on Windows Maximize and Restore events?

I'd greatly appreciate any suggestions on how to tackle this requirement.

[Daniil]

Hi,

Is there any way to make a TextArea occupy the available real estate only?

I think by respective setting of the layout. If you use the TextArea within the FormPanel with the default FormLayout, you should manage the Anchor property.
http://docs.sencha.com/ext-js/3-4/#!...out-cfg-anchor

There are also the respective server side AnchorHorizontal and AnchorVertical properties.

Can it react to panel resize events accordingly?

A correct layout causes correct resizing.

Is Window appropriate to implement that kind of functionality?

If so, how to make a TextArea resize itself on Windows Maximize and Restore events?

If you would:

1. Set up

Layout="FitLayout"

for the Window

2. Place the FormPanel into the Windows Items

3. Place the TextArea into the FormPanel Items as a last control.

4. Set up

Anchor="100% 100%"

for the TextArea.

Then, I think, you will get the desired result. If I correctly understand the requirement.

[vadym.f]

Hi Daniil,

Could you provide a littel example with working anchors? I tried to set the TextArea anchor as suggested in the link to '50% 100%' to occupy the whole height. However, that made no difference. Also, the TextArea is contained within a CompositeField. Does it matter?

<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" Region="Center">
    <Items>
		<ext:Panel ID="Panel1" runat="server" AutoScroll="false" Border="false" Region="Center"
			Layout="FitLayout">
			<Items>
				<ext:FormPanel ID="FormPanel1" runat="server" AutoScroll="false" Padding="10"
					Border="true" Frame="false" TrackResetOnLoad="true">
					<Items>
						<ext:CompositeField runat="server" FieldLabel="Status">
							<Items>
								<ext:TextField ID="Text1" runat="server" Width="180" />
								<ext:DisplayField runat="server" Width="10"></ext:DisplayField>
								<ext:DisplayField runat="server" Text="Status:" Width="120" />
								<ext:TextField ID="Text2" runat="server" Width="360" />
							</Items>
						</ext:CompositeField>						
						<ext:CompositeField runat="server" FieldLabel="Summary">
							<Items>
								<ext:TextArea ID="TextAreaSummary" runat="server" AutoScroll="true" Anchor="50% 100%"
									SubmitValue="false" EnableKeyEvents="true">
								</ext:TextArea>
							</Items>
						</ext:CompositeField>
					</Items>
					<BottomBar>
						<ext:Toolbar ID="Toolbar2" runat="server">
							<Items>
								<ext:Button ID="ButtonSave" runat="server" Text="Save" Icon="Disk" ToolTip="Save&nbsp;changes"
									Width="80" Disabled="true">
								</ext:Button>
								<ext:Button ID="ButtonReset" runat="server" Text="Reset" Icon="ArrowUndo" ToolTip="Reset"
									Width="80" Disabled="true">
								</ext:Button>
							</Items>
						</ext:Toolbar>
					</BottomBar>
				</ext:FormPanel>
			</Items>
		</ext:Panel>
	</Items>
</Viewport>

[Daniil]

The default layout of the CompositeField is the HBoxLayout. It doesn't deal with the Anchor property.

In your case you should set up a respective Anchor for the CompositeField. The TextArea is under HBoxLayout control, you should configure it accordingly.

[vadym.f]

The default layout of the CompositeField is the HBoxLayout. It doesn't deal with the Anchor property.

In your case you should set up a respective Anchor for the CompositeField. The TextArea is under HBoxLayout control, you should configure it accordingly.

I moved the Anchor setting to the CompositeField without any difference. I believe I'm missing some layout settings here. Could you suggest the right changes on the code snippet in this thread?

[vadym.f]

Hi Daniil,

I've removed the enclosing CompositeField, added

AnchorHorizontal="100%" AnchorVertical="-53"

and specified the MaxWidth for the TextArea. The setup meets my behavioral requirements at this moment. Thanks for the suggestions, if you believe my approach is correct, you can mark this thread as resolved.

[Daniil]

I can't see anything wrong in your solution. So, if it suites your need that is good:)