[CLOSED] FileUpload in toolbar not rendered correctly

  1. #1

    [CLOSED] FileUpload in toolbar not rendered correctly

    Hello,


    I need urgent help with upload control in toolbar.
    I put upload control in toolbar but browse button is not rendered correctly (I try in IE 8 and Firefox and same thing in both browsers).

    Second question is:
    Is it possible immediate upload selected file to server with upload control when I browse and select file
    in "Choose file dialog" and click "Open" (immediate upload file without click on btnAdd shown in my code bellow)?


    This is my sample code in usercontrol:
    <%@ControlLanguage="C#"AutoEventWireup="true"CodeFile="ScanEdit.ascx.cs"Inherits="ScanEdit" %>
    <%@RegisterAssembly="Ext.Net"Namespace="Ext.Net"TagPrefix="ext" %>
     
    <ext:XScriptID="XScript1"runat="server">
    <scripttype="text/javascript">
    function SelectedFile()
    {
    var cfile = #{FileUpload}.getValue().toLowerCase().trim();
    var bisempty = (cfile.match("\.mdb$") == null);
    if(bisempty)
    {
    #{FileUpload}.reset();
    #{btnAdd}.disable();
    }
    else
    {
    #{btnAdd}.enable();
    }
    }
    </script>
    </ext:XScript>
    <ext:Window ID="frmScanEdit" runat="server" Icon="Pictures" Title="Test sample..."
        Width="930" Height="430" MinHeight="300" MinWidth="750" AutoShow="false" Modal="true" Layout="Fit" Hidden="true" 
        Resizable="true" Draggable="true" >
        <Items>
            <ext:Panel ID="pnlBorder" runat="server" Width="650" Layout="border" Height="300" Border="false">
                <TopBar>
                    <ext:Toolbar ID="Toolbar2" runat="server">
                        <Items>
                            <ext:FileUploadField ID="FileUpload" runat="server" ButtonText="Browse..." Icon="Attach" EmptyText="only files with following extension: .mdb ...">
                                <Listeners>
                                    <FileSelected Handler="SelectedFile();" />
                                </Listeners>
                            </ext:FileUploadField>
                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="4"/>
                            <ext:Button ID="btnAdd" runat="server" Disabled="true" Icon="Add">
                                <DirectEvents>
                                    <Click OnEvent="UploadFile">
                                           <EventMask ShowMask="true" Target="CustomTarget" Msg="Uploading file..." CustomTarget="={#{frmScanEdit}.body}" />                                
    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel runat="server" ID="pnlCenter" Region="Center" Border="false">
       <Items>
        <ext:Label runat="server" ID="lblTest"/>
       <Items
      </ext:Panel>
                    <ext:Panel ID="pnlSouth" runat="server" Region="South" Height="150" Split="true" Collapsible="true" Border="false" AutoScroll="true">
                        <Items>
                            <ext:Image 
                                ID="Image1" 
                                runat="server" 
                                AutoShow="true"
                                ImageUrl="../images/none.png">
                            </ext:Image> 
                        </Items>
                    </ext:Panel>                    
                </Items>
                <BottomBar>
                    <ext:StatusBar ID="FormStatusBar" runat="server" DefaultText="Fill data..." BusyIcon="Accept" BusyText="Checking..."/>
                </BottomBar>
            </ext:Panel>
        </Items>
    </ext:Window>
    Code behind in .cs file
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.IO;
    using Ext.Net;
     
    publicpartialclassScanEdit : System.Web.UI.UserControl
    {
    protectedvoid Page_Load(object sender, EventArgs e)
    {
    }
     
    protectedvoid UploadFile(object sender, DirectEventArgs e)
    {
        if (this.FileUpload.HasFile)
        {
         
        }
    }
    }
    Best regards,
    Sasa
    Last edited by Daniil; Feb 02, 2011 at 10:37 AM. Reason: Removed <font> tags, [CLOSED]
  2. #2
    Hi,

    1. I can suggest you to use ButtonOnly mode.

    Example
    <ext:FileUploadField ... ButtonOnly="true">
       ...
    </ext:FileUploadField>
    2. You could use FileSelected DirectEvent.

    Example
    <ext:FileUploadField ...>
        <DirectEvents>
            <FileSelected OnEvent="UploadFile" />
        </DirectEvents>
    </ext:FileUploadField>
  3. #3
    Hi,

    It is required to apply the following css rules
    <%@ 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>
        <title>Ext.Net Example</title>
        
        <style type="text/css">
            .ext-ie .button-fix table.x-btn,
            .ext-gecko .button-fix table.x-btn{
                top:0px;            
            }
            
            .ext-ie .button-fix .x-form-text,
            .ext-gecko .button-fix .x-form-text{
                margin-top:1px;
            }
            
        </style>
    </head>
     
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
     
        <ext:Panel runat="server" Height="200">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:FileUploadField ID="FileUploadField1" runat="server" Width="200" CtCls="button-fix" />
                        
                        <ext:DisplayField ID="DisplayField1" runat="server" Text="Hi! Where is a Browse button?" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:Panel>
    </body>
    </html>

Similar Threads

  1. [CLOSED] GridPanel: Paging toolbar is not rendered in a hidden div
    By OSYS_FMS in forum 1.x Legacy Premium Help
    Replies: 27
    Last Post: Apr 27, 2012, 10:25 AM
  2. [CLOSED] Label not rendered correctly inside Toolbar
    By smart+ in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 14, 2011, 5:58 AM
  3. [CLOSED] [1.0] TopBar/ BottomBar not rendered correctly
    By klaus.schwarz in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Oct 28, 2010, 9:09 AM
  4. TriggerField not rendered in Toolbar
    By Peter P in forum 1.x Help
    Replies: 0
    Last Post: May 07, 2009, 4:46 PM
  5. Replies: 1
    Last Post: Jan 21, 2009, 12:46 PM

Tags for this Thread

Posting Permissions