PDA

View Full Version : form controls resize



[WP]joju
Mar 05, 2009, 10:14 AM
how can i resize a textarea, textfield and a multi select control which is inside a panel, when the panel gets resized? basically the panel adjusts it size because it is inside a column layout. all of these things are inside a window, so whenever the window resizes or maximizes, can the controls inside it adjust as well? i think the panels adjusts accordingly but my problem are the form controls





<ext:ColumnLayout ID="ColumnLayout0" runat="server">
<ext:LayoutColumn ColumnWidth=".45" >
<ext:Panel ID="extpnlQSEditTopLeftMain" runat="server" ><Body>
<ext:Panel ID="Panel2" runat="server" Title="Question Content" MonitorResize="true" >
<Body>
<ext:TextArea ID="exttaQuestionContent" runat="server" AllowBlank="false" AutoWidth="true" >
<Listeners>
<Change Handler="#{exthdnEditTracker}.setValue('Changed');" />
</Listeners>
</ext:TextArea>
</Body>
</ext:Panel>
<ext:Panel ID="Panel1" runat="server" Title="Question Description" >
<Body>
<ext:TextArea ID="exttaQuestionDescription" runat="server" Width="282" >
<Listeners>
<Change Handler="#{exthdnEditTracker}.setValue('Changed');" />
</Listeners>
</ext:TextArea>
</Body>

.... more code here...........




i have tried the resize and body resize handlers of the panel and try to set the size of the textarea from that event but the resize and body resize handlers are not getting executed even if the panel seem to have resized





<Listeners>
<BodyResize Handler="#{exttaQuestionContent}.setSize(#{Panel2}.getSize( )); alert('ok');" />
</Listeners>

Vladimir
Mar 05, 2009, 10:36 AM
Hi,

Use AnchorLayout


<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:AnchorLayout ID="AnchorLayout1" runat="server">
<ext:Anchor Vertical="50%" Horizontal="50%">
<ext:Panel
ID="Panel2"
runat="server"
Title="Top"
Html="Top"
/>
</ext:Anchor>
<ext:Anchor Vertical="50%" Horizontal="50%">
<ext:Panel
ID="Panel3"
runat="server"
Title="Bottom"
Html="Bottom"
/>
</ext:Anchor>
</ext:AnchorLayout>
</Body>
</ext:ViewPort>

[WP]joju
Mar 05, 2009, 11:06 AM
can this automatically resize textareas?

Vladimir
Mar 05, 2009, 11:10 AM
 AnchorLayout can resize any control which has setSize js function. So, TextArea is supported

[WP]joju
Mar 05, 2009, 11:42 AM
it seems that anchor layout is pretty much like row and column layout combined and can resize form controls (but i haven't tried it on textareas yet, i am having problem putting 2 panels side by side

the two main panels inside the window is displaying correctly but the 2 panels inside the first main panel, which should appear beside each other (one, 45%, the other 55% width) is not appearing beside each other even if the total horizontal percentage for the two is about 95%






<Body> //start body of window
<ext:AnchorLayout runat="server" >
<ext:Anchor Vertical="70%" >
<ext:Panel ID="Panel0" runat="server" >
<Body>
<ext:AnchorLayout runat="server" >
<ext:Anchor Horizontal="45%" >
<ext:Panel ID="extpnlQSEditTopLeftMain" runat="server" >
<Body>
//panel body here //
//several panels or textareas will go in here//
</Body>
</ext:Panel>
</ext:Anchor >
<ext:Anchor Horizontal="55%">
<ext:Panel runat="server" ..... >
<Body>
// panel body here//
</Body>

</ext:Panel>
</ext:Anchor>
</Body>

</ext:Panel>
<ext:Anchor Vertical="70%" >
//there is a grid panel here///
</ext:Anchor>
</ext:AnchorLayout>
</Body> //end body of window

Vladimir
Mar 05, 2009, 11:58 AM
The Panel is block element therefore two panel can't be placed in one row
You should use Column layout in Panel0 or use some css workaround




<%@ Page Language="C#" %>

<%@ 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>ViewPort with Anchor Layout and 3 Panels</title>
<style type="text/css">
.inline-item
{
display:inline !important;
float:left !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />

<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:AnchorLayout ID="AnchorLayout1" runat="server">
<ext:Anchor Horizontal="50%">
<ext:Panel
ID="Panel2"
runat="server"
Title="Left"
Cls="inline-item"
>
<Body>
Left
</Body>
</ext:Panel>
</ext:Anchor>
<ext:Anchor Horizontal="50%">
<ext:Panel
ID="Panel3"
runat="server"
Title="Right"
Cls="inline-item"
>
<Body>
Right
</Body>
</ext:Panel>
</ext:Anchor>
</ext:AnchorLayout>
</Body>
</ext:ViewPort>
</form>
</body>
</html>

[WP]joju
Mar 06, 2009, 12:44 AM
can't anchor layout expand multi select?

[WP]joju
Mar 06, 2009, 3:57 AM
it seems that the multi select control is not adjusting accordingly with the anchor layout




<ext:Panel ID="extpnlQSEditTopRightMain" runat="server" BodyStyle="height:100%" ><Body>
<ext:AnchorLayout ID="AnchorLayout5" runat="server" >
<ext:Anchor Horizontal="100%" Vertical="100%" >
<ext:Panel runat="server" ID="extpnlEditQuestionTags" Title="Select Question Tags" BodyStyle="padding: 5px 5px 5px 5px;" >
<Listeners>
<Resize Fn="qsedittagspnlresize" />
</Listeners>
<Body>
<ext:AnchorLayout ID="FormLayout4" runat="server" >
<ext:Anchor>
<ext:Label ID="Label2" runat="server" Html="Rights">
</ext:Label>
</ext:Anchor>
<ext:Anchor Horizontal="100%" Vertical="30%" IsFormField="true" >
<ext:MultiSelect ID="extmselQT1" runat="server" FieldLabel="" Width="330" StoreID="extstore1" DisplayField="tag_name" ValueField="wid_rev" >
</ext:MultiSelect>
</ext:Anchor>
<ext:Anchor>
<ext:Label ID="Label3" runat="server" Html="Focus Areas">
</ext:Label>
</ext:Anchor>
<ext:Anchor Horizontal="100%" Vertical="30%" IsFormField="true" >
<ext:MultiSelect ID="extmselQT2" runat="server" FieldLabel="" Width="330" StoreID="extstore2" DisplayField="tag_name" ValueField="wid_rev" >
</ext:MultiSelect>
</ext:Anchor>
<ext:Anchor>
<ext:Label ID="Label4" runat="server" Html="Topics">
</ext:Label>
</ext:Anchor>
<ext:Anchor Horizontal="100%" Vertical="30%" IsFormField="true" >
<ext:MultiSelect ID="extmselQT3" runat="server" FieldLabel="" Width="330" StoreID="extstore3" DisplayField="tag_name" ValueField="wid_rev" SortField="display_order" >
</ext:MultiSelect>
</ext:Anchor>
</ext:AnchorLayout>
..................




var qsedittagspnlresize = function (eto, adjWidth, adjHeight, rawWidth, rawHeight)
{
Ext.getCmp("uchrcaPublicQS_extmselQT1").setWidth(adjWidth);
Ext.getCmp("uchrcaPublicQS_extmselQT1").setHeight((adjHeight * 0.3));

Ext.getCmp("uchrcaPublicQS_extmselQT2").setWidth(adjWidth);

Ext.getCmp("uchrcaPublicQS_extmselQT2").setHeight((adjHeight * 0.3));

Ext.getCmp("uchrcaPublicQS_extmselQT3").setWidth(adjWidth);

Ext.getCmp("uchrcaPublicQS_extmselQT3").setHeight((adjHeight * 0.3));
}




one problem is that the main panel shown above ("extpnlQSEditTopRightMain") is inside a column layout and so i have to adjust its height everytime the window adjusts since column layout do not adjust the height

but the bigger problem is how to adjust the width and height of the multi select controls here, i have this panel resize function "qsedittagspnlresize" which executes when the window gets resized but the height is not adjusting, the width is changing on resize but the value is not correct. pls help

[WP]joju
Mar 09, 2009, 6:15 AM
problem about multi select resizing solved