Feb 16, 2011, 2:11 AM
[CLOSED] FormPanel buttons not getting correct width when loaded via auto load
For some reason, the buttons for the form panel are not getting the full width of the form that is being auto loaded. Therefore, you can only see one of the three buttons. In fact after removing much of the code, in this example when you show the hidden panel "frmPlnCalendarEditEvent" nothing scales correctly in terms of width.
I cut out a lot of code to save space. Just hide the calendar and show the edit form. You can see that the content doesn't scale to the correct width.
The auto loading of these layouts require a PHD. I can't wait till EXT 2.0 :-)
ascx file
I cut out a lot of code to save space. Just hide the calendar and show the edit form. You can see that the content doesn't scale to the correct width.
plnCalendar.hide();
frmPlnCalendarEditEvent.show();
This is all a result of trying to break up one enormous page into multiple views so it's easier to manage. Without auto load, everything works great as usual. As soon as auto load is introduced, i get all types of layout issues.The auto loading of these layouts require a PHD. I can't wait till EXT 2.0 :-)
ascx file
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:FormPanel MonitorResize="true" Padding="10" Title="Add Event" ID="FormPanel1"
runat="server" Border="false" Layout="fit" AutoHeight="true" MonitorValid="true" >
<Items>
<ext:FieldSet runat="server" ID="FieldSet1" Title="Event Info">
<Items>
<ext:TextField ID="TextField1" DataIndex="Title" runat="server" FieldLabel="Name" Width="300" LabelWidth="75" />
<ext:CompositeField ID="CompositeField2" runat="server" FieldLabel="When" LabelWidth="75">
<Items>
<ext:DateField ID="DateField1" Width="100" DataIndex="StartDate" runat="server" />
<ext:TimeField ID="TimeField1" Width="100" DataIndex="StartTime" runat="server" />
<ext:DisplayField ID="DisplayField4" runat="server" Text="to" width="25" StyleSpec="text-align:center" />
<ext:DateField ID="DateField2" Width="100" DataIndex="EndDate" runat="server" />
<ext:TimeField ID="TimeField2" Width="100" DataIndex="EndTime" runat="server" />
<ext:Checkbox ID="Checkbox1" DataIndex="IsAllDay" runat="server" StyleSpec="margin-top:4px;">
<Listeners>
<Check Handler="EventStartTime.setVisible(!EventIsAllDay.checked);
EventEndTime.setVisible(!EventIsAllDay.checked);" />
</Listeners>
</ext:Checkbox>
<ext:DisplayField ID="DisplayField5" runat="server" Text="All Day" />
</Items>
</ext:CompositeField>
</Items>
</ext:FieldSet>
</Items>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Save">
<Listeners>
<Click Handler="Ext.MessageBox.alert('Status', 'Event Saved');" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Reset">
<Listeners>
<Click Handler="#{frmPlnCalendarEditEvent}.getForm().reset();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="Cancel">
</ext:Button>
</Buttons>
</ext:FormPanel>
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:ColumnLayout ID="columnLayoutCalendar" runat="server" FitHeight="true">
<Columns>
<ext:LayoutColumn>
<ext:Panel ID="plnDatePicker" runat="server" Border="false">
<Items>
<ext:DatePicker
ID="DatePicker1"
Width="175"
runat="server"
Cls="ext-cal-nav-picker">
</ext:DatePicker>
</Items>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn>
<ext:Panel runat="server" Width="10" Border="false" />
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.8">
<ext:Panel runat="server" ID="plnCalendarComponentWrapper" Border="false" Layout="vbox" Width="680">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:CalendarPanel
ID="plnCalendar"
runat="server"
ActiveIndex="2"
Border="false"
Height="500">
<GroupStore ID="storeEventGroups" runat="server">
<Groups>
<ext:Group CalendarId="1" Title="Home" />
<ext:Group CalendarId="2" Title="Work" />
<ext:Group CalendarId="3" Title="School" />
</Groups>
</GroupStore>
<EventStore ID="storeCalendarEvents" runat="server" DateFormat="yyyy-MM-ddThh:mm:ss">
<Proxy>
<ext:HttpProxy Url="/Event/GetEventsByDate" />
</Proxy>
</EventStore>
<MonthView ID="MonthView1"
runat="server"
ShowHeader="true"
ShowWeekLinks="true"
ShowWeekNumbers="false"
/>
<ext:Panel runat="server" ID="frmPlnCalendarEditEvent" Layout="fit" Hidden="true" Border="false">
<AutoLoad Url="/Calendar/EditEvent" NoCache="true" ShowMask="true">
<Params>
<ext:Parameter Name="containerId" Value="function () { return #{frmPlnCalendarEditEvent}.id; }" Mode="Raw" />
</Params>
</AutoLoad>
</ext:Panel>
</Items>
</ext:Panel>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
controllerpublic ActionResult EditEvent(string containerId)
{
Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerId, Ext.Net.RenderMode.AddTo);
return pr;
}
Last edited by geoffrey.mcgill; Mar 01, 2011 at 3:39 PM.
Reason: [CLOSED]