What's New?

[CLOSED] [#11] Margins inside a FormPanel

Page 1 of 2 12 LastLast
  1. #1
    Oct 15, 2012, 10:38 AM

    [CLOSED] [#11] Margins inside a FormPanel

    Hi!

    According to this topic, margins should work under a FormPanel. I can get it to work under a composite field, but not a formpanel nor a panel with layout=form.

    Thanks

    <%@ Page Language="C#" EnableViewState="false" ClientIDMode="AutoID" %>

<%@ 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 />
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <form id="Form1" runat="server">
        <ext:FormPanel runat="server">
            <Items>
                <ext:TextField Margins="50 0 15 0" runat="server" />
            </Items>
        </ext:FormPanel>
        <ext:CompositeField runat="server">
            <Items>
                <ext:TextField ID="TextField1" Margins="50 0 15 0" runat="server" />
            </Items>
        </ext:CompositeField>
    </form>
</body>
</html>
    Last edited by Daniil; Dec 13, 2012 at 8:44 AM. Reason: [CLOSED]
  2. #2
    Oct 15, 2012, 2:12 PM
    Hi @SouthDeveloper,

    The Margins is used by Box and Border layouts only.
    http://docs.sencha.com/ext-js/3-4/#!...nt-cfg-margins

    You can configure a FormPanel with HBox and/or VBox layout if needed. Also you can wrap a required field in an additional Container with a respective Box layout.
  3. #3
    Oct 16, 2012, 10:25 AM
    Thanks,

    Margins worked fine on the hboxlayout, but the DropDownField 'V' arrow is now not aligned correctly.

    I tested on firefox.

    THANKS

    Updated code:

    <%@ Page Language="C#" EnableViewState="false" ClientIDMode="AutoID" %>
 
<%@ 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 />
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <form id="Form1" runat="server">
        <ext:Container ID="FormPanel1" runat="server" Layout="HBoxLayout">
            <Items>
                <ext:DropDownField ID="TextField1" Margins="50 0 15 0" runat="server" />
            </Items>
        </ext:Container>
        <ext:CompositeField ID="CompositeField1" runat="server">
            <Items>
                <ext:DropDownField ID="TextField2" Margins="50 0 15 0" runat="server" />
            </Items>
        </ext:CompositeField>
    </form>
</body>
</html>
  4. #4
    Oct 16, 2012, 10:52 AM
    Yes, I was able to reproduce it in FireFox only, not in IE9 and Chrome.

    For now, please use this fix:
    <style type="text/css">
    .x-gecko .x-form-field-wrap .x-form-twin-triggers .x-form-trigger {
        position: absolute !important;
    }
</style>
    I guess the issue should go away after FireFox update.
  5. #5
    Oct 16, 2012, 11:12 AM
    Still the same error :(

    Updated code:
    <%@ Page Language="C#" EnableViewState="false" ClientIDMode="AutoID" %>

<%@ 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>
    <style type="text/css">
        .x-gecko .x-form-field-wrap .x-form-twin-triggers .x-form-trigger {
            position: absolute !important;
        }
    </style>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <form id="Form1" runat="server">
        <ext:Container ID="FormPanel1" runat="server" Layout="HBoxLayout">
            <Items>
                <ext:DropDownField ID="TextField1" Margins="50 0 15 0" runat="server" />
            </Items>
        </ext:Container>
        <ext:CompositeField ID="CompositeField1" runat="server">
            <Items>
                <ext:DropDownField ID="TextField2" Margins="50 0 15 0" runat="server" />
            </Items>
        </ext:CompositeField>
    </form>
</body>
</html>
  6. #6
    Oct 16, 2012, 1:27 PM
    Apologize, please replace ".x-gecko" with ".ext-gecko".

    The first is for Ext.NET v2.
  7. #7
    Oct 17, 2012, 12:52 AM
    Sweet.

    Working fine now!

    MANY THANKS
  8. #8
    Oct 18, 2012, 5:40 PM
    Buddy, bad news

    The css code made all triggers go away :(

    Code to reprocude

    <%@ Page Language="C#" EnableViewState="false" ClientIDMode="AutoID" %>

<%@ 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>
    <style type="text/css">
        .ext-gecko .x-form-field-wrap .x-form-twin-triggers .x-form-trigger
        {
            position: absolute !important;
        }
    </style>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <form id="Form1" runat="server">
    <ext:ComboBox ID="TextField2" Margins="50 0 15 0" runat="server">
        <Triggers>
            <ext:FieldTrigger Icon="Clear" />
        </Triggers>
    </ext:ComboBox>
    </form>
</body>
</html>
  9. #9
    Oct 18, 2012, 6:49 PM
    Apologize, it was not a good fix.

    Please use this one.
    .ext-gecko .x-form-field-trigger-wrap .x-form-text {
    margin-top: -2px;
}
  10. #10
    Oct 18, 2012, 11:21 PM
    Now it is not working on a compositefield.

    I am wrapping all my componentes in compositefield as a temp solution.

    Thanks

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

<%@ 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">
    <style type="text/css">
        .ext-gecko .x-form-field-trigger-wrap .x-form-text {
            margin-top: -2px;
        }
    </style>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <br />
        <br />
        <br />
        <total:Panel ID="Panel1" Width="750" ButtonAlign="Left" runat="server">
            <Items>
                <ext:CompositeField ID="CompositeField1" HideLabels="true" runat="server">
                    <Defaults>
                        <ext:Parameter Name="margins" Value="0 35 15 0" Mode="Value" />
                    </Defaults>
                    <Items>
                        <ext:ComboBox ID="ComboBox1" runat="server" />
                    </Items>
                </ext:CompositeField>
            </Items>
        </total:Panel>
    </form>
</body>
</html>
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] GridPanel inside a FormPanel
    By mirwais in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 09, 2012, 11:59 AM
  2. GridPanel inside a FormPanel
    By cajun in forum 1.x Help
    Replies: 1
    Last Post: May 08, 2012, 1:36 PM
  3. ComboBox inside FormPanel
    By rsaldanhabr in forum 1.x Help
    Replies: 1
    Last Post: Nov 10, 2010, 4:04 PM
  4. ComboBox inside FormPanel inside ComponentMenuItem not working?
    By wexman in forum 1.x Help
    Replies: 2
    Last Post: Sep 21, 2010, 11:14 AM
  5. ChooserDialog inside formpanel
    By 78fede78 in forum Bugs
    Replies: 2
    Last Post: Jun 28, 2010, 2:39 PM

Posting Permissions