What's New?

[CLOSED] Upload control and Deferred Render

  1. #1
    Aug 09, 2010, 9:21 AM

    [CLOSED] Upload control and Deferred Render

    Morning,

    We are using Deferred Render to reference Controls between tabs. However, turning on deferred render has stopped the upload control on the second tab from working.

    Please see following code. 

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Downloads.aspx.cs" Inherits="Downloads" %>
<%@ Register TagPrefix="ext" Namespace="Ext.Net" %>
<!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:Viewport ID="Viewport1" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server" StyleSpec="background-color: white;">
                <Center>
                    <ext:TabPanel runat="server" ID="tbpMain" DeferredRender=false>
                      
                        <Items>
                            <ext:FormPanel ID="frmDetails" runat="server" Title="Labour Costs" Icon="Money">
                                <Items>
                                   
                                            <ext:FileUploadField runat="server" ID="filUpload" FieldLabel="Select file" Icon="Attach" >
                                            </ext:FileUploadField>
                                           </Items>
                            </ext:FormPanel>
                            <ext:FormPanel ID="frmBudget" Title="Other Costs " runat="server" Icon="Money">
                               <Items>
                                            <ext:FileUploadField runat="server" ID="filUpload2" FieldLabel="Select file" Icon="Attach">
                                            </ext:FileUploadField>
                                       
                                        </Items>
                            </ext:FormPanel>
                          
                        </Items>
                        <BottomBar>
                            <ext:StatusBar ID="stbMain" runat="server">
                                <Items>
                                    <ext:Panel runat="server" ID="pnlModification" SkinID="ModificationDetails">
                                    </ext:Panel>
                                </Items>
                                <Plugins>
                                    <ext:ValidationStatus ID="ValidationStatus1" runat="server">
                                        <CustomConfig>
                                            <ext:ConfigItem Name="FormPanelIDs" Value="[frmDetails]" Mode="Value">
                                            </ext:ConfigItem>
                                        </CustomConfig>
                                    </ext:ValidationStatus>
                                </Plugins>
                            </ext:StatusBar>
                        </BottomBar>
                    </ext:TabPanel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
       

    <div>
    
    </div>
    </form>
</body>
</html>
    Last edited by geoffrey.mcgill; Aug 10, 2010 at 8:09 PM. Reason: [
  2. #2
    Aug 09, 2010, 11:49 AM
    Hello, danielg!

    As we know 
    DeferredRender="false"
    forces rendering controls in tabs. It's good but some controls (particularly FileUploadField) doesn't render properly within the hidden container. Its widths are not calculated properly.

    Please set width of FileUploadField controls and add listener of the activate event of tabs as it's in the following example.

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

<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
<!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>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:TabPanel runat="server" DeferredRender="false">
        <Items>
            <ext:Panel runat="server" Title="Tab1">
                <Items>
                    <ext:FileUploadField ID="Field1" runat="server" Width="200" />
                </Items>
                <Listeners>
                    <Activate Single="true" Handler="Field1.syncSize();Field1.fileInput.setWidth(Field1.button.getEl().getWidth() + (Ext.isIE ? 4 : 0));" />
                </Listeners>
            </ext:Panel>
        </Items>
    </ext:TabPanel>
    </form>
</body>
</html>
  3. #3
    Aug 10, 2010, 9:24 AM
    Hi,

    We changed syncSize method of the FileUploadField, so just call syncSize (without any additional code)
    <Activate Single="true" Handler="Field1.syncSize();"/>
  4. #4
    Aug 11, 2010, 8:23 AM
    Thanks - that worked.

    Dan

Similar Threads

  1. Cancel Deferred render IFrame in Card layout
    By Baidaly in forum 1.x Help
    Replies: 1
    Last Post: Nov 02, 2012, 3:46 AM
  2. File Upload Control
    By dan182 in forum 1.x Help
    Replies: 3
    Last Post: Apr 02, 2012, 2:49 PM
  3. [CLOSED] Drag file to upload control
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 13, 2012, 4:31 PM
  4. [CLOSED] File upload control not working in IE8
    By majestic in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Dec 15, 2011, 4:02 PM
  5. Upload control problem
    By harshad.jadhav in forum 1.x Help
    Replies: 1
    Last Post: Dec 20, 2010, 2:45 PM

Posting Permissions