[CLOSED] Create a textfield dynamically

  1. #1

    [CLOSED] Create a textfield dynamically

    Hi,

    I am trying to create a textfield under each fileuploadfield that I create dynamically by clicking on the "Add" button, similar to the "Description" field (id: txtFileDescription). However, I am unable to get the textfield to appear below the fileuploadfield. Could you please advise what i may be missing? This is my sample code below:


    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FileUpload2.aspx.vb" Inherits="EXTTabs.FileUpload2" %>
    
    <%@ 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">
        <style type="text/css">
            .flupd-height
            {
                height: 13px !important;
                padding-bottom: 5px !important;
            }
            .cntnr-pad
            {
                padding-bottom: 5px !important;
            }
             .instructions
            {   margin-top : 70px;
                padding-bottom: 30px;
                font-size: 110%; 
                font-weight: bold;
                color: #000000;
                text-align: center;
            }
        </style>
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form id="Form1" runat="server" enctype="multipart/form-data" method="post">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <div   class="instructions">Please select a file to upload. For more files click on Add and then Upload all files at once</div>
    
        <ext:Viewport ID="Viewport1" runat="server" Layout="HBoxLayout">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:Container ID="Container1" runat="server" Layout="VBoxLayout">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Pack="Start" />
                    </LayoutConfig>
                    <Items>
                        <ext:Container ID="Container2" runat="server">
                            <LayoutConfig>
                                <ext:TableLayoutConfig Columns="1" />
                            </LayoutConfig>
                            <Items>
                                <ext:FormPanel ID="FormPanel1" runat="server" Region="Center" Width="500" AutoHeight="true">
                                    <Items>
                                        <ext:CompositeField ID="CompositeField1" runat="server" AnchorHorizontal="95%">
                                            <Items>
                                                <ext:FileUploadField ID="FileUploadField1" Cls="flupd-height" runat="server" Flex="1" />
                                                <ext:Button ID="Button1" runat="server" Width="45" Text="Add">
                                                    <Listeners>
                                                        <Click Handler="FormPanel1.addAndDoLayout({
                                                    xtype  : 'container',
                                                    layout : 'hbox',
                                                    anchor : '90%',
                                                    cls    : 'cntnr-pad',
                                                    items  : [{
                                                      xtype: 'fileuploadfield',
                                                      flex : 1,
                                                      cls  : 'flupd-height'
                                                    }, {
                                                        xtype: 'button',
                                                        text: 'Remove',
                                                        listeners: {
                                                            click: {
                                                                fn: function (btn) {
                                                                    var ct = btn.ownerCt,
                                                                       formPanel = ct.ownerCt;
                                                                    formPanel.remove(ct);
                                                                }
                                                            }
                                                        }
                                                     }]
                                                },
                                                {
                                                    xtype: 'container',
                                                    layout: 'auto',
                                                    items  : [
                                                     new Ext.form.TextField({
                                                        xtype: 'textfield',
                                                        fieldlabel: 'Description'
                                                        })
                                                    ]
                                                      
                                                });" />
                                                    </Listeners>
                                                </ext:Button>
                                            </Items>
                                        </ext:CompositeField>
                                    <ext:TextField ID="txtFileDescription" runat="server" Width="250" AllowBlank="false" BlankText="Please enter a file description" FieldLabel="Description" />
                                    </Items>
    
                                </ext:FormPanel>
                                <ext:FormPanel ID="FormPanel2"   Layout="FitLayout" runat="server" Width="500" Border="false">
                                    <Items>
                                        <ext:Button ID="btnUpload" runat="server" Text="UpLoad">
                                        </ext:Button>
                                    </Items>
                                </ext:FormPanel>
                                
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Viewport>
        
        </form>
    </body>
    </html>
    Thanks

    Ravi Swaminathan
    Last edited by Daniil; May 24, 2012 at 9:34 PM. Reason: [CLOSED]
  2. #2
    Hi,

    The add and addAndDoLayout methods doesn't apply several arguments, it adds only the first argument.

    So, it should look this way:
    FormPanel1.add({ /* FileUploadField */ });
    FormPanel1.addAndDoLayout({ /* TextField */ });
    Also please replace "fieldlabel" with "fieldLabel" (upper-case "L").
  3. #3

    Re: Create a text field dynamically

    Hi,

    Thanks for your response.

    You mean I need to do FormPanel1.add and FormPanel1.addAndDoLayout within the same Click Handler?

    I am getting an error when I do that. Please see my sample code below:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FileUpload2.aspx.vb" Inherits="EXTTabs.FileUpload2" %>
    
    <%@ 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">
        <style type="text/css">
            .flupd-height
            {
                height: 13px !important;
                padding-bottom: 5px !important;
            }
            .cntnr-pad
            {
                padding-bottom: 5px !important;
            }
            .instructions
            {
                margin-top: 70px;
                padding-bottom: 30px;
                font-size: 110%;
                font-weight: bold;
                color: #000000;
                text-align: center;
            }
        </style>
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form id="Form1" runat="server" enctype="multipart/form-data" method="post">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <div class="instructions">
            Please select a file to upload. For more files click on Add and then Upload all
            files at once</div>
        <ext:Viewport ID="Viewport1" runat="server" Layout="HBoxLayout">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:Container ID="Container1" runat="server" Layout="VBoxLayout">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Pack="Start" />
                    </LayoutConfig>
                    <Items>
                        <ext:Container ID="Container2" runat="server">
                            <LayoutConfig>
                                <ext:TableLayoutConfig Columns="1" />
                            </LayoutConfig>
                            <Items>
                                <ext:FormPanel ID="FormPanel1" runat="server" Region="Center" Width="500" AutoHeight="true">
                                    <Items>
                                        <ext:CompositeField ID="CompositeField1" runat="server" AnchorHorizontal="95%">
                                            <Items>
                                                <ext:FileUploadField ID="FileUploadField1" Cls="flupd-height" runat="server" Flex="1" />
                                                <ext:Button ID="Button1" runat="server" Width="45" Text="Add">
                                                    <Listeners>
                                                        <Click Handler="FormPanel1.add({
                                                    xtype  : 'container',
                                                    layout : 'hbox',
                                                    anchor : '90%',
                                                    cls    : 'cntnr-pad',
                                                    items  : [{
                                                      xtype: 'fileuploadfield',
                                                      flex : 1,
                                                      cls  : 'flupd-height'
                                                    }, {
                                                        xtype: 'button',
                                                        text: 'Remove',
                                                        listeners: {
                                                            click: {
                                                                fn: function (btn) {
                                                                    var ct = btn.ownerCt,
                                                                       formPanel = ct.ownerCt;
                                                                    formPanel.remove(ct);
                                                                }
                                                            }
                                                        }
                                                     }],
                                                });" 
                                                "FormPanel1.addAndDoLayout({
                                                    xtype  : 'container',
                                                    layout : 'hbox',
                                                    anchor : '90%',
                                                        items  : [{
                                                        xtype  : 'textfield',
                                                        fieldLabel: 'Description'
                                                        }]
                                                     });"
                                                />
                                                    </Listeners>
                                                </ext:Button>
                                            </Items>
                                        </ext:CompositeField>
                                        <ext:TextField ID="txtFileDescription" runat="server" Width="250" AllowBlank="false"
                                            BlankText="Please enter a file description" FieldLabel="Description" />
                                    </Items>
                                </ext:FormPanel>
                                <ext:FormPanel ID="FormPanel2" Layout="FitLayout" runat="server" Width="500" Border="false">
                                    <Items>
                                        <ext:Button ID="btnUpload" runat="server" Text="UpLoad">
                                            <DirectEvents>
                                                <Click OnEvent="Upload">
                                                </Click>
                                            </DirectEvents>
                                        </ext:Button>
                                    </Items>
                                </ext:FormPanel>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Thanks

    Ravi Swaminathan
  4. #4

    Re: Create a text field dynamically

    Hi,

    I am very sorry I forgot to remove the "Upload" DirectEvent call from my earlier code. Here it is again:

    Hi,

    Thanks for your response.

    You mean I need to do FormPanel1.add and FormPanel1.addAndDoLayout within the same Click Handler?

    I am getting an error when I do that. Please see my sample code below:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FileUpload2.aspx.vb" Inherits="EXTTabs.FileUpload2" %>
    
    <%@ 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">
        <style type="text/css">
            .flupd-height
            {
                height: 13px !important;
                padding-bottom: 5px !important;
            }
            .cntnr-pad
            {
                padding-bottom: 5px !important;
            }
            .instructions
            {
                margin-top: 70px;
                padding-bottom: 30px;
                font-size: 110%;
                font-weight: bold;
                color: #000000;
                text-align: center;
            }
        </style>
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form id="Form1" runat="server" enctype="multipart/form-data" method="post">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <div class="instructions">
            Please select a file to upload. For more files click on Add and then Upload all
            files at once</div>
        <ext:Viewport ID="Viewport1" runat="server" Layout="HBoxLayout">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:Container ID="Container1" runat="server" Layout="VBoxLayout">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Pack="Start" />
                    </LayoutConfig>
                    <Items>
                        <ext:Container ID="Container2" runat="server">
                            <LayoutConfig>
                                <ext:TableLayoutConfig Columns="1" />
                            </LayoutConfig>
                            <Items>
                                <ext:FormPanel ID="FormPanel1" runat="server" Region="Center" Width="500" AutoHeight="true">
                                    <Items>
                                        <ext:CompositeField ID="CompositeField1" runat="server" AnchorHorizontal="95%">
                                            <Items>
                                                <ext:FileUploadField ID="FileUploadField1" Cls="flupd-height" runat="server" Flex="1" />
                                                <ext:Button ID="Button1" runat="server" Width="45" Text="Add">
                                                    <Listeners>
                                                        <Click Handler="FormPanel1.add({
                                                    xtype  : 'container',
                                                    layout : 'hbox',
                                                    anchor : '90%',
                                                    cls    : 'cntnr-pad',
                                                    items  : [{
                                                      xtype: 'fileuploadfield',
                                                      flex : 1,
                                                      cls  : 'flupd-height'
                                                    }, {
                                                        xtype: 'button',
                                                        text: 'Remove',
                                                        listeners: {
                                                            click: {
                                                                fn: function (btn) {
                                                                    var ct = btn.ownerCt,
                                                                       formPanel = ct.ownerCt;
                                                                    formPanel.remove(ct);
                                                                }
                                                            }
                                                        }
                                                     }],
                                                });" 
                                                "FormPanel1.addAndDoLayout({
                                                    xtype  : 'container',
                                                    layout : 'hbox',
                                                    anchor : '90%',
                                                        items  : [{
                                                        xtype  : 'textfield',
                                                        fieldLabel: 'Description'
                                                        }]
                                                     });"
                                                />
                                                    </Listeners>
                                                </ext:Button>
                                            </Items>
                                        </ext:CompositeField>
                                        <ext:TextField ID="txtFileDescription" runat="server" Width="250" AllowBlank="false"
                                            BlankText="Please enter a file description" FieldLabel="Description" />
                                    </Items>
                                </ext:FormPanel>
                                <ext:FormPanel ID="FormPanel2" Layout="FitLayout" runat="server" Width="500" Border="false">
                                    <Items>
                                        <ext:Button ID="btnUpload" runat="server" Text="UpLoad">
                                            
                                        </ext:Button>
                                    </Items>
                                </ext:FormPanel>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  5. #5
    Please remove two double quotes between the add and addAndDoLayout methods.
  6. #6

    Re: Create a dynamic text field

    Thanks, Daniil.

    Yes, that helped solved the issue. However, I am still unable to get the text field to appear below the FileUploadField. I will open a new thread.

    Thanks

    Ravi Swaminathan
  7. #7
    This topic appears to continue at the following location:

    http://forums.ext.net/showthread.php...ileuploadfield
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] I create dynamically control
    By trieu.tran in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 05, 2012, 5:53 AM
  2. [CLOSED] how to re-create menu dynamically
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Oct 20, 2011, 10:25 AM
  3. [CLOSED] Dynamically create chekboxgroup
    By hillscottc in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 06, 2010, 7:02 PM
  4. How to Create a portlet dynamically?
    By mohan.kantipudi in forum 1.x Help
    Replies: 0
    Last Post: Jan 16, 2009, 2:11 AM
  5. Replies: 1
    Last Post: Jul 20, 2008, 2:05 PM

Posting Permissions