[CLOSED] FormPanel in ComponentMenuItem not resizing

  1. #1

    [CLOSED] FormPanel in ComponentMenuItem not resizing

    Hi,

    I have a ComponentMenuItem which is a form panel. The form panel (in some scenarios) may contain only display fields.

    Although I can load records into the form panel, when the component menu item is shown, you cannot see the display field values, only the labels. If TextFields are used, this is not an issue as the initial width of the text field is applied to the Form Panel menu. However, if the display field value is initially blank, then the width is close to zero for the value so only the width of the field label applies.

    Is there a way to get the component to resize correctly when the menu item is shown (i tried a few things but couldn't get it to work). I cannot know what the text size will be.

    The only thing I can think at the moment is a CSS min-width on the display field. This works, but you then have to guess a reasonable width which I cannot always do.

    Is there a better way that I have missed?

    Sample code to reproduce problem (at least in Firefox):

    <%@ Page Language="C#" %>
    
    <!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>Form in component item in menu</title>
    
            <style>
                /* .display-field { min-width: 100px; } */
            </style>
    
            <script>
                MenuTest = {
                    onBeforeShow: function(menu) {
                        var form = menu.items.get(0).component,
                            record = new Ext.data.Record({ DisplayField1: 'My field value' });
    
                        form.getForm().loadRecord(record);
                    }
                };
            </script>
        </head>
        <body>
            <ext:ResourceManager runat="server" />
            
            <ext:Panel runat="server" Width="300" Height="300">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button runat="server" Text="Menu1">
                                <Menu>
                                    <ext:Menu runat="server">
                                        <Items>
                                            <ext:MenuItem runat="server" Text="Component">
                                                <Menu>
                                                    <ext:Menu runat="server">
                                                        <Items>
                                                            <ext:ComponentMenuItem runat="server" Shift="false">
                                                                <Component>
                                                                    <ext:FormPanel runat="server" LabelWidth="150">
                                                                        <Items>
                                                                            <ext:DisplayField
                                                                                runat="server"
                                                                                FieldLabel="Field label"
                                                                                DataIndex="DisplayField1"
                                                                                Cls="display-field"
                                                                                />
                                                                        </Items>
                                                                    </ext:FormPanel>
                                                                </Component>
                                                            </ext:ComponentMenuItem>
                                                        </Items>
                                                        <Listeners>
                                                            <BeforeShow Fn="MenuTest.onBeforeShow" />
                                                        </Listeners>
                                                    </ext:Menu>
                                                </Menu>
                                            </ext:MenuItem>
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:Panel>
        </body>
    </html>
    Notice the sample code has the CSS min-width workaround commented out. Uncomment it to see it work, but it is then dependent on expected values. I can use other CSS like max-width and ellipsis etc... But wondering if I am missing a trick?

    Thanks!
    Last edited by Daniil; Sep 05, 2013 at 3:22 AM. Reason: [CLOSED]
  2. #2
    Hi Anup,

    Seems setting up AutoWidth="true" for the FormPanel helps remedy the problem. Please try it out.
  3. #3
    Well, that is embarrassing. i am sure I had tried that along with a number of other combinations. maybe I missed out AutoWidth on the FormPanel but tried it elsewhere...! Anyway, it definitely works now, so many thanks. You can mark that as closed. Sorry to waste your time :)
  4. #4
    Nice to help you! You are always a long-awaited person on the forums;)

Similar Threads

  1. [CLOSED] ComponentMenuItem in Ext.Net 2.0
    By capbarbell in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 25, 2013, 7:31 AM
  2. [OPEN] [#168] ComponentMenuItem in Ext.net 2.0
    By xeo4.it in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 13, 2013, 12:54 PM
  3. [CLOSED] FileUploadField in ComponentMenuItem problem
    By xeo4.it in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 14, 2012, 1:13 PM
  4. Replies: 2
    Last Post: Sep 21, 2010, 11:14 AM
  5. [CLOSED] Bug with .ToScript() for ComponentMenuItem
    By pil0t in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 05, 2010, 4:25 PM

Posting Permissions