What's New?

[CLOSED] FormPanel with empty cells?

  1. #1
    Sep 28, 2010, 3:50 PM

    [CLOSED] FormPanel with empty cells?

    I have to create a layout as per attached picture.
    I can use the formpanel?
    how do I get the blank cells?
    Attached Thumbnails Click image for larger version.  Name: Immagine.jpg  Views: 94  Size: 41.2 KB  ID: 1664  
    Last edited by Daniil; Sep 29, 2010 at 6:43 PM. Reason: [CLOSED]
  2. #2
    Sep 28, 2010, 4:18 PM
    I'd probably first try a 'vbox' layout with three Containers for the columns.

    Then inside each Container, just render your Fields.

    For the blank rows, you should be able to render an <ext:DisplayField Text=" " />
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Sep 29, 2010, 9:27 AM
    "cap" and "indirizzo" must be aligned with the "città"
    where am I doing wrong?


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Form.aspx.cs" Inherits="AcciseOffLine.Siti.Form" %>
<%@ 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></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:FormPanel 
            ID="FormPanel1" 
            runat="server" 
            Title=""
            TitleCollapse="true"
            MonitorPoll="500" 
            Border="false"
            MonitorValid="true" 
            Padding="5" 
            Width="1000" 
            Height="250"
            ButtonAlign="Right"
            Layout="Column">
            <Items>
                <ext:Panel runat="server" Border="false" Header="false" ColumnWidth=".3" Layout="Form" LabelAlign="Top">
                    <Defaults>
                        <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                        <ext:Parameter Name="MsgTarget" Value="side" />
                    </Defaults>
                    <Items>
                        <ext:TextField ID="TextFieldNome" runat="server" FieldLabel="Nome" AnchorHorizontal="92%" />
                        <ext:TextArea ID="TextFieldDescrizione"  Height="100" runat="server" FieldLabel="Descrizione" AnchorHorizontal="92%" />
                        <ext:TextField ID="TextFieldCitta" runat="server" FieldLabel="Citta" AnchorHorizontal="92%" />
                    </Items>
                </ext:Panel>
                <ext:Panel runat="server" Border="false" Layout="Form" ColumnWidth=".3" LabelAlign="Top">
                    <Defaults>
                        <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                        <ext:Parameter Name="MsgTarget" Value="side" />
                    </Defaults>
                    <Items>
                        <ext:TextField runat="server" FieldLabel="Codice" AnchorHorizontal="92%" />
                        <ext:DisplayField runat="server" Text=" " /> 
                        <ext:TextField ID="TextField1" runat="server" FieldLabel="Indirizzo" AnchorHorizontal="92%" />
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Panel1" runat="server" Border="false" Layout="Form" ColumnWidth=".3" LabelAlign="Top">
                    <Defaults>
                        <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                        <ext:Parameter Name="MsgTarget" Value="side" />
                    </Defaults>
                    <Items>
                         <ext:TextField ID="TextFieldRiferimento" runat="server" FieldLabel="Riferimento" AnchorHorizontal="92%" />
                        <ext:DisplayField ID="DisplayField1" runat="server" Text=" " /> 
                        <ext:TextField ID="TextFieldCap" runat="server" FieldLabel="Cap" AnchorHorizontal="92%" />
                    </Items>
                </ext:Panel>
            </Items>
            
           
            
        </ext:FormPanel>

    </form>
</body>
</html>
    Attached Thumbnails Click image for larger version.  Name: Immagine.jpg  Views: 73  Size: 23.0 KB  ID: 1665  
  4. #4
    Sep 29, 2010, 9:53 AM
    Hi,

    Please set the Height property of blank DisplayFields to the same value as for the TextArea.

    Example
    <ext:DisplayField runat="server" Text=" " Height="100"/>
  5. #5
    Sep 29, 2010, 10:21 AM
    The textbox "provincia" should be aligned with the textbox "città".
    The textbox "riferimento" shall extend for two (colspan = 2).
    is it possible?
    Attached Thumbnails Click image for larger version.  Name: Immagine.jpg  Views: 85  Size: 22.2 KB  ID: 1666  
  6. #6
    Sep 29, 2010, 11:31 AM
    Hi,

    I would suggest you this way.

    Example
    <%@ 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>Ext.Net Example</title>

    <style type="text/css">
        .myNoteCls {
            color: Black !important;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel runat="server" Height="250">
        <Items>
            <ext:Container runat="server" Layout="hbox">
                <Defaults>
                    <ext:Parameter Name="margins" Value="10 10 10 10" Mode="Value" />
                </Defaults>
                <Items>
                    <ext:TextField 
                        runat="server" 
                        Note="TextField1:" 
                        NoteAlign="Top" 
                        NoteCls="myNoteCls"
                        Width="200" />
                    <ext:TextField 
                        runat="server" 
                        Note="TextField2:" 
                        NoteAlign="Top" 
                        NoteCls="myNoteCls"
                        Width="200" />
                    <ext:TextField 
                        runat="server" 
                        Note="TextField3:"
                        NoteAlign="Top" 
                        NoteCls="myNoteCls"
                        Flex="1" />
                </Items>
            </ext:Container>
            <ext:Container runat="server" Layout="hbox">
                <Defaults>
                    <ext:Parameter Name="margins" Value="10 10 10 10" Mode="Value" />
                </Defaults>
                <Items>
                    <ext:TextArea 
                        runat="server" 
                        Note="TextArea:" 
                        NoteAlign="Top" 
                        NoteCls="myNoteCls"
                        Width="200" 
                        Height="100" />
                </Items>
            </ext:Container>
            <ext:Container runat="server" Layout="hbox">
                <Defaults>
                    <ext:Parameter Name="margins" Value="10 10 10 10" Mode="Value" />
                </Defaults>
                <Items>
                    <ext:TextField 
                        runat="server" 
                        Note="TextField4:" 
                        NoteAlign="Top" 
                        NoteCls="myNoteCls"
                        Width="200" />
                    <ext:TextField 
                        runat="server" 
                        Note="TextField5:" 
                        NoteAlign="Top" 
                        NoteCls="myNoteCls"
                        Width="200" />
                    <ext:TextField 
                        runat="server" 
                        Note="TextField6:" 
                        NoteAlign="Top" 
                        NoteCls="myNoteCls"
                        Flex="1" />
                    <ext:TextField 
                        runat="server" 
                        Note="TextField7:" 
                        NoteAlign="Top" 
                        NoteCls="myNoteCls"
                        Flex="1" />
                </Items>
            </ext:Container>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
  7. #7
    Sep 29, 2010, 12:52 PM
    Ok

    with this solution you can use the validation?

    https://examples1.ext.net/#/Form/FormPanel/Validation/
  8. #8
    Sep 29, 2010, 1:10 PM
    Sure. Please use the FormPanel instead of Panel.

    Example
    <%@ 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>Ext.Net Example</title>
 
    <style type="text/css">
        .myNoteCls {
            color: Black !important;
        }
        
        .icon-exclamation {
            padding-left: 25px !important;
            background: url(/icons/exclamation-png/ext.axd) no-repeat 3px 3px !important;
        }
        
        .icon-accept {
            padding-left: 25px !important;
            background: url(/icons/accept-png/ext.axd) no-repeat 3px 3px !important;
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:FormPanel
        ID="FormPanel1"
        runat="server" 
        Height="300" 
        MonitorPoll="500" 
        MonitorValid="true">
        <Items>
            <ext:Container runat="server" Layout="hbox">
                <Defaults>
                    <ext:Parameter Name="margins" Value="10 10 10 10" Mode="Value" />
                    <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                </Defaults>
                <Items>
                    <ext:TextField
                        runat="server"
                        Note="TextField1:"
                        NoteAlign="Top"
                        NoteCls="myNoteCls"
                        Width="200" />
                    <ext:TextField
                        runat="server"
                        Note="TextField2:"
                        NoteAlign="Top"
                        NoteCls="myNoteCls"
                        Width="200" />
                    <ext:TextField
                        runat="server"
                        Note="TextField3:"
                        NoteAlign="Top"
                        NoteCls="myNoteCls"
                        Flex="1" />
                </Items>
            </ext:Container>
            <ext:Container runat="server" Layout="hbox">
                <Defaults>
                    <ext:Parameter Name="margins" Value="10 10 10 10" Mode="Value" />
                    <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                </Defaults>
                <Items>
                    <ext:TextArea
                        runat="server"
                        Note="TextArea:"
                        NoteAlign="Top"
                        NoteCls="myNoteCls"
                        Width="200"
                        Height="100" />
                </Items>
            </ext:Container>
            <ext:Container runat="server" Layout="hbox">
                <Defaults>
                    <ext:Parameter Name="margins" Value="10 10 10 10" Mode="Value" />
                    <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                </Defaults>
                <Items>
                    <ext:TextField
                        runat="server"
                        Note="TextField4:"
                        NoteAlign="Top"
                        NoteCls="myNoteCls"
                        Width="200" />
                    <ext:TextField
                        runat="server"
                        Note="TextField5:"
                        NoteAlign="Top"
                        NoteCls="myNoteCls"
                        Width="200" />
                    <ext:TextField
                        runat="server"
                        Note="TextField6:"
                        NoteAlign="Top"
                        NoteCls="myNoteCls"
                        Flex="1" />
                    <ext:TextField
                        runat="server"
                        Note="TextField7:"
                        NoteAlign="Top"
                        NoteCls="myNoteCls"
                        Flex="1" />
                </Items>
            </ext:Container>           
        </Items>
        <Buttons>
                <ext:Button runat="server" Text="Save">
                    <Listeners>
                        <Click Handler="if (#{FormPanel1}.getForm().isValid()) {
                                            Ext.Msg.alert('Submit', 'Saved!');
                                        }
                                        else {
                                            Ext.Msg.show({
                                                icon: Ext.MessageBox.ERROR, 
                                                msg: 'FormPanel is incorrect', buttons:Ext.Msg.OK});
                                        }" />
                    </Listeners>
                </ext:Button>
                <ext:Button runat="server" Text="Cancel" />
            </Buttons>

        <BottomBar>
                <ext:StatusBar runat="server" />
            </BottomBar>
        <Listeners>
                <ClientValidation Handler="el.getBottomToolbar().setStatus({
                                                text : valid ? 'Form is valid' : 'Form is invalid', 
                                                iconCls: valid ? 'icon-accept' : 'icon-exclamation'});" />
            </Listeners>
    </ext:FormPanel>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Strange behavior of grid row when cells contains cells command
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: May 09, 2012, 9:22 AM
  2. [FormPanel] Buttons dinamically + Before script + User Control + Iterate over all FormPanel's of the window
    By marcoslimagon in forum 1.x Help
    Replies: 0
    Last Post: Nov 17, 2011, 10:53 AM
  3. [CLOSED] FormPanel isValid problem with empty CheckboxGroup
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 04, 2011, 1:55 PM
  4. [CLOSED] removing cells from rowlayout
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 17, 2011, 11:46 AM
  5. Store - load from Object if Datasource is empty - ComboBox Template empty?
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Jun 26, 2009, 11:32 AM

Posting Permissions