Oct 09, 2008, 2:55 AM
File Upload Dialog
<P align=left>Please see this post for the latest version: http://forums.ext.net/showthread.php?postid=8229.aspx
I know there's been talk about this in the forums before, but has anyone created the file upload dialog UX? The one here: http://www.max-bazhenov.com/dev/uplo...-2.0/index.php
I've been attempting to do it, but as this is my first ExtJS experience, it's slow going and I haven't made much progress. I know server controls very well (having authored multiple ones myself - include richtextboxes), but I'm still familiarizing myself w/ the ExtJS + Coolite APIs.
I have it so I can drop in the control into the designer and it appears, but at runtime IE gives me a javascript error "Invalid source HTML for this operation." On Firefox 3.0, it appears, but the dialog is squished down. When you resize it, it takes on its correct min width/height.
I figure this is probably a version issue since the javascript I pulled from that site is for 2.0 and ExtJS is on 2.2. However, I don't know where to begin to address the issue.
Can anyone help? Here's the code I have so far:
I know there's been talk about this in the forums before, but has anyone created the file upload dialog UX? The one here: http://www.max-bazhenov.com/dev/uplo...-2.0/index.php
I've been attempting to do it, but as this is my first ExtJS experience, it's slow going and I haven't made much progress. I know server controls very well (having authored multiple ones myself - include richtextboxes), but I'm still familiarizing myself w/ the ExtJS + Coolite APIs.
I have it so I can drop in the control into the designer and it appears, but at runtime IE gives me a javascript error "Invalid source HTML for this operation." On Firefox 3.0, it appears, but the dialog is squished down. When you resize it, it takes on its correct min width/height.
I figure this is probably a version issue since the javascript I pulled from that site is for 2.0 and ExtJS is on 2.2. However, I don't know where to begin to address the issue.
Can anyone help? Here's the code I have so far:
using System;
using System.Web.UI;
using System.Drawing;
using System.ComponentModel;
using Coolite.Ext.Web;
[assembly: WebResource("ServerControls.Resources.Scripts.Ext.ux.UploadDialog.packed.js", "text/javascript")]
[assembly: WebResource("ServerControls.Resources.Scripts.Ext.ux.UploadDialog.js", "text/javascript")]
namespace ServerControls {
[ToolboxData("<{0}:FileUploadDialog runat=\"server\" Title=\"Upload Files\" Collapsible=\"false\" Icon=\"None\" />")]
[ToolboxBitmap(typeof(FileUploadDialog), "Resources.ToolboxIcons.window.bmp")]
[Designer(typeof(FileUploadDialogDesigner))]
[Description("Specialized dialog for uploading files.")]
[InstanceOf(ClassName = "Ext.ux.UploadDialog.Dialog")]
[ClientScript(
Type = typeof(FileUploadDialog),
WebResource = "ServerControls.Resources.Scripts.Ext.ux.UploadDialog.packed.js",
WebResourceDebug = "ServerControls.Resources.Scripts.Ext.ux.UploadDialog.js"
)]
public class FileUploadDialog : Window {
protected override void OnBeforeClientInit(Observable sender) {
base.OnBeforeClientInit(sender);
}
protected override void OnAfterClientInit(Observable sender) {
base.OnAfterClientInit(sender);
}
}
}
Here's the designer code:using System;
using System.ComponentModel;
using System.ComponentModel.Design;
using Coolite.Ext.Web;
namespace ServerControls {
internal class FileUploadDialogDesigner : ExtWebControlDesigner {
public override bool AllowResize {
get {
return false;
}
}
public override string GetDesignTimeHtml() {
if (((FileUploadDialog)this.Control).Hidden) {
return string.Empty;
}
return base.CreatePlaceHolderDesignTimeHtml();
}
private DesignerActionListCollection actionLists;
public override DesignerActionListCollection ActionLists {
get {
if (actionLists == null) {
actionLists = new DesignerActionListCollection();
actionLists.Add(new FileUploadDialogActionList(this.Component));
}
return actionLists;
}
}
}
internal class FileUploadDialogActionList : WindowActionList {
public FileUploadDialogActionList(IComponent component) : base(component) {
}
public override DesignerActionItemCollection GetSortedActionItems() {
return base.GetSortedActionItems();
}
}
}
Sample web content page:<%@ Page Title="File Upload Dialog" Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true" CodeBehind="fileUploadDialog.aspx.cs" Inherits="Sandbox.fileUploadDialog" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%@ Register Assembly="ServerControls" Namespace="ServerControls" TagPrefix="ux" %>
<asp:Content ID="content" ContentPlaceHolderID="content" runat="server">
<ext:ScriptManager ID="ScriptManager" runat="server" />
<br />
<ux:FileUploadDialog ID="FileUploadDialog1" runat="server" Collapsible="True" Icon="Cart" Title="Upload Files" Draggable="true" Floating="true" Maximizable="True" Modal="True" ShowOnLoad="False" />
<ext:Button ID="Button1" runat="server" Icon="ReportAdd" Text="Upload Files">
<Listeners>
<Click Handler="#{FileUploadDialog1}.show()" />
</Listeners>
</ext:Button>
</asp:Content>
Thanks!