[CLOSED] FormPanel buttons not getting correct width when loaded via auto load

Page 1 of 3 123 LastLast
  1. #1

    [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.

    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>
    controller
    public 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]
  2. #2
    Hi,

    I see that you use AutoHeight="true" and Layout="fit" together for one container. These thing doesn't make sense together. Also, I pretty sure that you need 'form' layout in FormPanel (it's by default), bot Layout="fit" overrides it. So, please remove both properties.

    To fix width issue please try to set HideMode="Offsets" for
    <ext:Panel 
        runat="server" 
        ID="frmPlnCalendarEditEvent" 
        ... 
        HideMode="Offsets" />
    Did it help?
  3. #3
    I tried all that. Same effect. In my full example, someone it figures out the full width for everything but the buttons. I can only see half a button unless I specify a width on the panel that gets loaded. When i specify a width on that panel then the fieldsets run off the page and get cut off by the panel.
  4. #4
    Hi,

    Do not forget that if you don't specify ControlToRender or SingleControl then interim panel will be created therefore in this case you have to wrap your form panel by FitLayout and container should have Layout="fit" (or another appropriate layout)
    Please show your container and what id you pass to controller
  5. #5
    Isn't that what i already have posted?

    <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>
  6. #6
    Hi,

    In your case,

    1. Set SingleControl="true" for PartialViewResult
    2. Provide fixed height for frmPlnCalendarEditEvent or Flex option (VBox required height for the item otherwise do not use vBox)
    3. You have to call doLayout for the plnCalendarComponentWrapper after show method is called for frmPlnCalendarEditEvent
  7. #7
    none of the above works. The button is still getting cut off. I think it's a bug with the button generation. It doesn't detect the width of the panel correctly.
  8. #8
    here's an image showing the issue.
    Attached Thumbnails Click image for larger version. 

Name:	buttons-not-scaling.jpg 
Views:	100 
Size:	97.4 KB 
ID:	2328  
  9. #9
    Hi,

    I cannot reproduce the issue. Please post full test sample
    Here is my test case

    Page
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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 id="Head1" runat="server">
        <title></title>
    </head>                                                                                                                                             
    <body>
        <ext:ResourceManager ID="ScriptManager1" runat="server" />
        <ext:Viewport ID="ViewPort1" runat="server" Layout="Fit">
            <DirectEvents>
                <AfterRender Url="/Test/UC1">
                    <ExtraParams>
                        <ext:Parameter Name="containerId" Value="ViewPort1" Mode="Value" />
                    </ExtraParams>
                </AfterRender>
            </DirectEvents>
        </ext:Viewport>
    </body>
    </html>
    View1
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
     
    <%@ 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>
                    <ext:Button runat="server" Text="Show Panel" OnClientClick="#{frmPlnCalendarEditEvent}.show(); #{frmPlnCalendarEditEvent}.ownerCt.doLayout();" />
                </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">
                           
                        </EventStore>
                        <MonthView ID="MonthView1"
                            runat="server"
                            ShowHeader="true"
                            ShowWeekLinks="true"
                            ShowWeekNumbers="false"
                            />  
                    </ext:CalendarPanel>        
                    <ext:Panel runat="server" ID="frmPlnCalendarEditEvent" Layout="fit" Hidden="true" Border="false" Flex="1">
                        <AutoLoad Url="/Test/UC2" 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>
    View2
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <ext:FormPanel MonitorResize="true" Padding="10" Title="Add Event" ID="FormPanel1"
    runat="server" Border="false" 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>
    Controller
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using System.Web.Mvc.Ajax;
    using Ext.Net.MVC.Demo.Models;
    
    namespace Ext.Net.MVC.Demo.Controllers
    {
        public class TestController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult UC1(string containerId)
            {
                PartialViewResult result = new PartialViewResult();
    
                result.ContainerId = containerId;
                result.WrapByScriptTag = false;
                result.RenderMode = RenderMode.AddTo;
                return result;
            }
    
            public ActionResult UC2(string containerId)
            {
                PartialViewResult result = new PartialViewResult();
    
                result.ContainerId = containerId;
                result.SingleControl = true;
                result.RenderMode = RenderMode.AddTo;
                return result;
            }
        }
    }
  10. #10
    Removing Layout="fit" from my FormPanel fixes the button issue. And it doesn't make sense to use Layout="fit" on a form panel and I didn't remember why i did that till i removed it. I had added it because that was the only way the form panel would set an appropriate width. Without that Layout="fit" the form panel is just 65px in width. I give up for now. I just set a static width on the form panel and form panel width is correct and my buttons work :-)

    I can't waste anymore time on this. I'm excited for Ext.net 2.0 :-)

    Thanks for your help.
Page 1 of 3 123 LastLast

Similar Threads

  1. [CLOSED] How to select correct multiItems on form load...
    By PhilG in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 03, 2012, 9:34 AM
  2. [CLOSED] DateField: How to disable auto correct?
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 08, 2011, 8:14 AM
  3. Replies: 0
    Last Post: Nov 17, 2011, 10:53 AM
  4. [CLOSED] Grid Panel : Column width (Auto width)
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 24, 2011, 8:31 PM
  5. Replies: 2
    Last Post: Aug 12, 2010, 2:12 PM

Posting Permissions