Ext. UX. uploaddialog control instructions and solutions to problems in ext 3. x

 

[Ext. UX. uploaddialog] is a file upload control developed based on extjs2.0.

1. Control description:

The control consists of the following objects:

Ext. UX. utils. eventqueue: Universal event processor. The object has a built-in event queue. You can call its process function to respond to the events to be processed in the queue. The control internally defines the File Upload process as an event array, so that an event is triggered at a specific stage during the upload process to proceed to the next step. This object is used to respond to the event and execute the function associated with the event in a specific stage of the upload process.

Ext. UX. utils. FSA: The Event processor specific to the upload process is derived from Ext. UX. utils. eventqueue.

Ext. UX. uploaddialog. browsebutton: Open the file button control base class.

Ext. UX. uploaddialog. tbbrowsebutton: Open the file button control extension class. The "add" button in this control is the object instance.

Ext. UX. uploaddialog. Dialog: Upload the control dialog box object and the main object of the control. This object is derived from Ext. Window.

When using this control, we only need to callExt. UX. uploaddialog. DialogObject, as follows:

1 dialog = new Ext.ux.UploadDialog.Dialog({2   url: 'upload-dialog-request.php',3   reset_on_hide: false,4   allow_close_on_upload: true,5   upload_autostart: true6 });7 ...8 dialog.show('show-button');

When the server processes the code of the uploaded file (no matter what Web language you use), the following JSON string must be output after the user submits the upload form:

{Success: True, // It can be true or false. If the file is uploaded successfully, true. Error: 'file data uploaded successfully! '// This information will be displayed in the remarks column of each row in the grid}

In the. NET project, you can use context. response. Write ("{success: True, message: 'file data uploaded successfully! .

For more detailed usage, see the source of the control:

Http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php

Ii. Call problems and solutions:

Because the control is based on ext JS 2. generated in Version X, when ext JS is upgraded to 3. 'X _ buttons. upload. getel () 'is null or is not an object.

This is because the Ext. Button template in ext 3. X is changed, as follows:

 Ext.Button.buttonTemplate = new Ext.Template(                    '<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">',                    '<tr><td class="x-btn-tl"><i>&#160;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&#160;</i></td></tr>',                    '<tr><td class="x-btn-ml"><i>&#160;</i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><button type="{0}"></button></em></td><td class="x-btn-mr"><i>&#160;</i></td></tr>',                    '<tr><td class="x-btn-bl"><i>&#160;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&#160;</i></td></tr>',                    '</tbody></table>');

This causes this in the control source code. el. child (". x-BTN-center "); the object cannot be obtained, so you need to change it to this. el. child (". x-BTN-MC ");

After a series of modifications to the source code, this control can be successfully used in ext 3. X.

For detailed instructions on solving this problem, see: http://swbssd.iteye.com/blog/600872 article

3. Limitations and extensions of the control:

This control allows you to upload multiple files and display the upload progress. This upload method does give users a comfortable interaction experience during the upload process.

However, this control does not reflect the progress of a specific file in the uploaded multi-file, that is, when the user uploads a large file list, the progress bar of this control stays at the start of the upload of this large file, and does not reflect the real-time upload progress of the file.

If you want to solve this problem, you must start with the server-side program. The server-side program must support output of the upload progress during the upload process, the client asynchronously requests the path of the progress information in the background, and the request is then displayed on the control.

Therefore, to fully display the progress information of each sub-file, except for modifying or extending [Ext. UX. uploaddialog] in addition to the code, you also need to output the upload progress information of the specified file in the server-side upload code to display it in the control.

Attribute configuration reference
Ext. UX. uploaddialog. Dialog = function (config)
{
VaR default_config = {
Border: false,
Width: 450,
Height: 300,
Minwidth: 450,
Minheight: 300,
Plain: True,
Constrainheader: True,
Draggable: True,
Closable: True,
Maximizable: false,
Minimizable: false,
Resizable: True,
Autodestroy: True,
Closeaction: 'hide ',
Title: This. i18n. title,
CLS: 'ext-Ux-uploaddialog-dialog ',
//--------
URL :'',
Base_params :{},
Permitted_extensions: [],
Reset_on_hide: True,
Allow_close_on_upload: false,
Upload_autostart: false,
Post_var_name: 'file'

4. Related downloads:

1. Ext. UX. uploaddialog original version (based on ext 2.x)
[Download]

2. Ext. UX. uplaoddialog release (based on ext 3.x, correct errors, add Chinese information, and call examples) [Download]

3. Ext. UX. uploaddialog original reference

Http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php