What's New?

[CLOSED] Need a remove button for a dynamically created FileUpload control

  1. #1
    May 21, 2012, 3:19 PM

    [CLOSED] Need a remove button for a dynamically created FileUpload control

    Hi,

    I wish to place an "Add" and "Remove" button alongside each FileUpload control that is added dynamically. Clicking on "Add" will create a new FileUpload control below the current one. Clicking on "Remove" will remove the current "FileUpload control.

    This sample code below has the "Add" button but does not seem to be able to create a new FileUpload control when clicked on.

    Could you please help?

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FileUpload.aspx.vb" Inherits="EXTTabs.FileUpload" %>

<%@ 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>
    <script type="text/javascript">
        var count = 1;
     
        var addField = function (form) {
            count++;
            form.add(new Ext.form.DisplayField({
              anchor: "100%",
              height: 10
            }));
            form.addAndDoLayout(new Ext.form.FileUploadField({
              width: "300",
           }));
           
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server" enctype="multipart/form-data" method="post">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:FormPanel ID="FormPanel1" Layout="HBoxLayout" runat="server" Width="500" Padding="20"
        AutoHeight="true">
        <Items>
            <ext:FileUploadField ID="FileUploadField1" runat="server" Width="300">
                <DirectEvents>
                    <FileSelected OnEvent="FileUploadField_FileSelected" IsUpload="False" />
                </DirectEvents>
            </ext:FileUploadField>
            <ext:Button ID="btnAddFileUpload" runat="server" Text="Add">
                <Listeners>
                    <Click Handler="addField(FormPanel1)" />
                </Listeners>
            </ext:Button>
        </Items>
    </ext:FormPanel>
    <ext:Button ID="btnUpload" runat="server" Text="UpLoad">
        <DirectEvents>
            <Click OnEvent="Upload">
            </Click>
        </DirectEvents>
    </ext:Button>
    </form>
</body>
</html>
    Thanks

    Ravi Swaminathan
    Last edited by Daniil; May 22, 2012 at 1:52 PM. Reason: [CLOSED]
  2. #2
    May 21, 2012, 4:18 PM
    Hi,

    It's a layout issue. I think you should remove 
    Layout="HBoxLayout"
    of the FormPanel.

    Then you can combine the FileUploadField and Button using a CompositeField control.

    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>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:FormPanel 
        ID="FormPanel1" 
        runat="server" 
        Width="300" 
        AutoHeight="true"
        HideLabels="true">
        <Items>
            <ext:CompositeField runat="server" AnchorHorizontal="100%">
                <Items>
                    <ext:FileUploadField runat="server" Flex="1" />
                    <ext:Button runat="server" Text="Add">
                        <Listeners>
                            <Click Handler="FormPanel1.addAndDoLayout({
                                                xtype  : 'fileuploadfield',
                                                anchor : '100%' 
                                            });" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:CompositeField>
        </Items>
    </ext:FormPanel>
</body>
</html>
  3. #3
    May 21, 2012, 6:07 PM

    Re: Need a remove button for a dynamically created FileUpload control

    Thanks very much, Daniil. Exactly what I needed.

    How about the "Remove" button alongside each of the fileupload controls that are added? This should remove the control that corresponds to the "Remove" button.

    Thanks

    Ravi
  4. #4
    May 21, 2012, 6:16 PM
    Could you clarify what exactly problem are you facing with the Remove button?

    I would use the remove method.
    http://docs.sencha.com/ext-js/4-1/#!...-method-remove
  5. #5
    May 22, 2012, 1:25 AM

    Re: Needa remove button

    Hi Daniil,

    I need a remove button, which when clicked, would remove the last container that has been added. This is, in case a user has accidentally added a fileupload control using the "addfield" function below, but decides not to have it and wishes to remove it.

    It possibly would be a "RemoveField" function similar to the "AddField" function and attached to the click event of the "Remove" button. 


    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="FileUpload.aspx.vb" Inherits="EXTTabs.FileUpload" %>

 

<%@ 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>


 <script type="text/javascript">        var count = 1;
      
        var addField = function (form) {
            count++;
            form.add(new Ext.form.DisplayField({
              anchor: "100%",
              height: 10
            }));
            form.addAndDoLayout(new Ext.form.FileUploadField({
              width: "300",
           }));
            
        }
    </script>
    Thanks

    Ravi Swaminathan
  6. #6
    May 22, 2012, 10:15 AM
    I can't see where you create any Remove button.

    We can suggest the following solution.

    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>

    <script type="text/javascript">
        var add = function (formPanel) {
            formPanel.addAndDoLayout({
                xtype  : "container",
                layout : "hbox",
                anchor : "100%",
                items  : [{
                    xtype : "fileuploadfield",
                    flex  : 1
                }, {
                    xtype     : "button",
                    text      : "Remove",
                    listeners : {
                        click : {
                            fn : function (btn) {
                                var ct = btn.ownerCt,
                                    formPanel = ct.ownerCt;
                                
                                formPanel.remove(ct);
                            }
                        }
                    }
                }]
            });
        };   
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:FormPanel
        ID="FormPanel1"
        runat="server"
        Width="300"
        AutoHeight="true"
        HideLabels="true">
        <Items>
            <ext:Container runat="server" AnchorHorizontal="100%" Layout="HBoxLayout">
                <Items>
                    <ext:FileUploadField runat="server" Flex="1" />
                    <ext:Button runat="server" Text="Add">
                        <Listeners>
                            <Click Handler="add(FormPanel1);" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Container>
        </Items>
    </ext:FormPanel>
</body>
</html>
  7. #7
    May 22, 2012, 1:40 PM

    Re: Need a remove button

    Thanks very much, Daniil!! Exactly what I needed.

    Ravi Swaminathan

Similar Threads

  1. Can't get the value of a textField created in the codebehind and added to a Window that is created by pressing a button DESKTOP.
    By tk.Mageztik in forum 2.x Help
    Replies: 0
    Last Post: Aug 01, 2012, 1:20 AM
  2. [CLOSED] DirectMethod missing when control created dynamically
    By logicspeak in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 08, 2012, 8:29 PM
  3. How to get ID of dynamically Created control (code behind) in 8.x
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Sep 06, 2011, 6:33 PM
  4. Problem when clicking a button on the toolbar dynamically created
    By Wellington Caetano in forum 1.x Help
    Replies: 0
    Last Post: Apr 07, 2011, 8:48 PM
  5. [CLOSED] [1.0] Dynamically created control problem
    By galeb in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 19, 2010, 7:16 AM

Posting Permissions