[CLOSED] ComboBox and MultiCombo resizing when cycling read-only state

  1. #1

    [CLOSED] ComboBox and MultiCombo resizing when cycling read-only state

    I have a form that can open in either read-only or edit mode. The absolute layout is used, as are FieldLabels with custom LabelWidths. The sizes of both the ComboBoxes and the MultiCombos are reduced whenever their read-only state is changed by setReadOnly.

    In the example below, the expected layout can be seen by clicking 'Show Edit' first. However, closing the window and re-opening it with 'Show ReadOnly' results in the fields shrinking. Switching back to 'Show Edit' shrinks them further. Closing and reopening with the same button does not cause a change in size.

    <%@ Page Language="C#"  %>
    <%@ 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 runat="server">
    <title>Test Field Width</title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" />
    <script type="text/javascript">
    var MyApp = {
        showWindow: function (readOnly) {
            readOnly = !!readOnly;
    
            ComboBox1.setReadOnly(readOnly);
            ComboBox2.setReadOnly(readOnly);
            MultiCombo1.setReadOnly(readOnly);
            NumberField1.setReadOnly(readOnly);
            MultiCombo2.setReadOnly(readOnly);
    
            TestWindow.show();
        }
    };
    </script>
    </head>
    <body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Window runat="server" ID="TestWindow"
        Width="500"
        Height="400"
        Padding="10"
        Resizable="false"
        Hidden="true"
        CloseAction="Hide"
        Modal="true"
        Layout="Fit">
        <Items>
            <ext:FormPanel runat="server" ID="TestForm"
                BaseCls="x-plain"
                Layout="Absolute">
                <Items>
                    <ext:ComboBox runat="server" ID="ComboBox1"
                         FieldLabel="Combo 1"
                         LabelWidth="140"
                         X="0"
                         Y="5"
                         Anchor="100%" />
                    <ext:ComboBox runat="server" ID="ComboBox2"
                         FieldLabel="Combo 2"
                         LabelWidth="140"
                         X="0"
                         Y="35"
                         Anchor="100%" />
                    <ext:MultiCombo runat="server" ID="MultiCombo1"
                         FieldLabel="MultiCombo 1"
                         LabelWidth="110"
                         X="30"
                         Y="65"
                         Anchor="100%" />
                    <ext:NumberField runat="server" ID="NumberField1"
                         FieldLabel="NumberField 1"
                         LabelWidth="110"
                         X="30"
                         Y="95"
                         Anchor="100%" />
                    <ext:MultiCombo runat="server" ID="MultiCombo2"
                         FieldLabel="MultiCombo 2"
                         LabelWidth="100"
                         X="40"
                         Y="125"
                         Anchor="100%" />
                </Items>
            </ext:FormPanel>
        </Items>
    </ext:Window>
    <ext:Button runat="server" Text="Show Edit">
        <Listeners>
            <Click Handler="MyApp.showWindow();" />
        </Listeners>
    </ext:Button>
    <ext:Button runat="server" Text="Show ReadOnly">
        <Listeners>
            <Click Handler="MyApp.showWindow(true);" />
        </Listeners>
    </ext:Button>
    <form id="form1" runat="server"></form>
    </body>
    </html>
    Last edited by Daniil; Aug 20, 2010 at 3:52 PM. Reason: [CLOSED]
  2. #2
    Perhaps I just answered my own question - according to the ExtJS docs, labelWidth is only valid on FormPanel and any child containers. The fields are not containers. It's interesting that the values are respected at least some of the time, though (like the initial layout).
  3. #3
    What are the opinions around here for edit vs. new post? I don't like replying to myself, but I know some are of the opinion that you shouldn't change something once it's been presented unless it doesn't really change the content (like a typo correction or something like that).

    Anyway, now I'm also unsure about whether fieldlabels are technically allowed under absolute positioning. I think I'm going to revise my approach - I'm currently thinking the best approach is to absolutely position containers to hold fields using the form layout. I've attached what the form looks like. If there's a better way, I'd like to know, but I wanted to get this posted before I left for the day so I could minimize the issue as much as possible.
    Attached Thumbnails Click image for larger version. 

Name:	form.jpg 
Views:	78 
Size:	73.0 KB 
ID:	1486  
  4. #4
    Hello!

    Perhaps I just answered my own question - according to the ExtJS docs, labelWidth is only valid on FormPanel and any child containers. The fields are not containers. It's interesting that the values are respected at least some of the time, though (like the initial layout)
    I think you are right. The absolute layout doesn't work correct with when the FieldLabel is used. Instead of FieldLabel you can use within a FormPanel something like this:
    <ext:CompositeField runat="server">
        <Items>
            <ext:Label runat="server" Text="Label:"/>
            <ext:ComboBox ID="ComboBox1" runat="server"  Flex="1"/>
        </Items>
    </ext:CompositeField>
    Last edited by Daniil; Aug 17, 2010 at 10:58 PM.
  5. #5
    Hello!

    What are the opinions around here for edit vs. new post? I don't like replying to myself, but I know some are of the opinion that you shouldn't change something once it's been presented unless it doesn't really change the content (like a typo correction or something like that).
    I have the same opinion that you mentioned.
    Anyway, now I'm also unsure about whether fieldlabels are technically allowed under absolute positioning. I think I'm going to revise my approach - I'm currently thinking the best approach is to absolutely position containers to hold fields using the form layout. I've attached what the form looks like. If there's a better way, I'd like to know, but I wanted to get this posted before I left for the day so I could minimize the issue as much as possible.
    I'm not sure but it looks like there is a issue in the updateEditState method which is invoked during execution of setReadOnly method. Anyway I see no restrictions in the ExtJS docs for using absolute and fieldLabel together.

    Also I think this example should be useful for you.

Similar Threads

  1. [CLOSED] TabStrip not Resizing
    By egvt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 23, 2012, 3:58 PM
  2. [CLOSED] Read from grid, add to combobox
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 27, 2011, 4:22 PM
  3. [CLOSED] Control inside a MultiCombo or ComboBox
    By Leonid_Veriga in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 25, 2010, 4:14 PM
  4. [CLOSED] Bug resizing ViewPort
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 15, 2010, 6:33 PM
  5. [CLOSED] BorderLayout and resizing
    By Riset in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 26, 2009, 6:37 AM

Posting Permissions