What's New?

[CLOSED] FileUploadField Control not rendering

  1. #1
    Mar 23, 2013, 9:21 PM

    [CLOSED] FileUploadField Control not rendering

    Hi,

    I have attached sample code. In this example I have added one web form which contains two panels under card layout. First panel has just "Panel1 Info" as html, and in second panel has one FileUploadField and "Panel2 Info" as html. In Page_Load if add "pnlbackground.ActiveIndex = 1;" FileUploadField control rendering while switching from panel1 to panel2 or panel2 to Panel1, but in Page_Load if add "pnlbackground.ActiveIndex = 0;" then switching from Panel1 to Panel2 FileUploadField is not showing. How to render that FileUploadField?

    <%@ 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">
<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            pnlbackground.ActiveIndex = 0;
        }
    }

    public void ShowPanel1Info(object sender, DirectEventArgs e)
    {
        pnlbackground.ActiveIndex = 0;
    }

    public void ShowPanel2Info(object sender, DirectEventArgs e)
    {
        pnlbackground.ActiveIndex = 1;
    }
    
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">

        var SetMultipleUpload = function (fileupload) {
            fileupload.fileInput.set({ multiple: 'multiple' });
        }

        var UpdateUploadInfo = function (el) {

            var ret = true;

            if (Ext.isIE) {
                return;
            }
            
            if (el.files.length < 21) {
                //file...
            }
            else {
                Ext.Msg.alert("File Count", "Selected file count should not exceed 20.");
                ret = false;
            }

            return ret;
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="resMngr" runat="server" />
    <ext:Viewport ID="Viewport1" runat="server" Layout="Border">
        <Items>
            <ext:Panel ID="pnlbackground" runat="server" Region="Center" Border="false" Layout="CardLayout">
                <TopBar>
                    <ext:Toolbar ID="tbTest" runat="server">
                        <Items>
                            <ext:Button ID="btnPnl1" runat="server" Text="Load Panel1">
                                <DirectEvents>
                                    <Click OnEvent="ShowPanel1Info" />
                                </DirectEvents>
                            </ext:Button>
                            <ext:ToolbarSeparator />
                            <ext:Button ID="btnPnl2" runat="server" Text="Load Panel2">
                                <DirectEvents>
                                    <Click OnEvent="ShowPanel2Info" />
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel ID="pnl1" runat="server" Border="true" html = "Panel1 info" Region="Center" BodyStyle="background-color:#ffffff">
                        <Items>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="pnl2" runat="server" Border="true" Region="Center" html = "Panel2 Info" BodyStyle="background-color:#ffffff">
                        <Items>
                            <ext:FileUploadField ID="FileUploadField1" runat="server" ButtonText="Browse To Upload"
                                Icon="Add" ButtonOnly="true" AllowBlank="false">
                                <Listeners>
                                    <Render Handler="SetMultipleUpload(this) ;" />
                                    <FileSelected Handler="if(!UpdateUploadInfo(this.fileInput.dom)) {this.reset();SetMultipleUpload(this)}" />
                                </Listeners>
                            </ext:FileUploadField>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Last edited by Daniil; Mar 28, 2013 at 4:15 AM. Reason: [CLOSED]
  2. #2
    Mar 25, 2013, 2:47 AM
    Hello!

    Thank you, we are investigating.

    Temporarily use the following overriding:

    <script>
	Ext.override(Ext.form.FileUploadField, {
		onRender : function (ct, position) {
			Ext.form.FileUploadField.superclass.onRender.call(this, ct, position);

			this.wrap = this.el.wrap({ 
				cls   : "x-form-field-wrap x-form-file-wrap", 
				style : "overflow:hidden;" + (Ext.isIE ? "height:22px;" : "") 
			});
	
			this.el.addClass("x-form-file-text");
			this.el.dom.removeAttribute("name");

			this.createFileInput();

			var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
				text     : this.buttonText,
				disabled : this.disabled,
				iconCls  : this.iconCls
			});

			this.button = new Ext.Button(Ext.apply(btnCfg, {
				renderTo : this.wrap,
				cls      : "x-form-file-btn" + (btnCfg.iconCls ? (btnCfg.text ? " x-btn-text-icon" : " x-btn-icon") : "")
			}));
	
			var fiWidth = this.button.getEl().getWidth() + (Ext.isIE ? 4 : 0);
	
			if (fiWidth > (Ext.isIE ? 4 : 0)) {
				this.fileInput.setWidth(fiWidth);
			}

			if (this.buttonOnly) {
				this.el.setVisibilityMode(Ext.Element.DISPLAY);
				this.el.hide();
				this.wrap.setWidth('auto');
				this.button.setPosition(0, 0);
				this.wrap.setWidth(this.button.getEl().getWidth());            
			}
	
			this.bindListeners();
			this.resizeEl = this.positionEl = this.wrap;
		}
	});
</script>
  3. #3
    Mar 25, 2013, 4:44 AM
    Hello,

    Yes, rendering of initially hidden things can be wrong.

    Setting up HideMode="Offsets" for the "pnl2" helps. This setting almost always helps to remedy such issues.

Similar Threads

  1. [CLOSED] FileUploadField and dynamic control
    By bakardi in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 29, 2012, 1:00 PM
  2. FileUploadField and persistence of control field
    By PetrSnobelt in forum 1.x Help
    Replies: 0
    Last Post: Oct 17, 2011, 12:50 PM
  3. fileuploadfield control width problem
    By kondareddy1984 in forum 1.x Help
    Replies: 4
    Last Post: Apr 22, 2011, 5:34 PM
  4. how to add ext:FileUploadField control in each row of ext:GridPanel
    By mandeep in forum 1.x Help
    Replies: 0
    Last Post: Nov 11, 2010, 9:15 PM
  5. How to use FileUploadField control?
    By matthaus in forum 1.x Help
    Replies: 0
    Last Post: Jun 01, 2009, 12:32 AM

Tags for this Thread

Posting Permissions