UploadQueue.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:6k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. Imgorg.UploadQueue = Ext.extend(Ext.Panel,{
  8.     swfu: '',
  9.     autoRemove: false,
  10.     uploaded: false,
  11.     
  12.     initComponent: function() {
  13.         Ext.apply(this,{
  14.             layout: 'fit',
  15.             autoScroll: true,
  16.             items: [{
  17.                 xtype: 'dataview',
  18.                 id: 'img-uploaddv',
  19.                 autoWidth: true,
  20.                 tpl: new Ext.XTemplate(
  21.                     '<tpl for=".">',
  22.                         '<div class="upload-file" id="{id}">',
  23.                             '<div class="upload-name">{name}</div>',
  24.                             '<div id="{id}-pb" class="upload-pb"></div>',
  25.                             '<div class="x-clear"></div>',
  26.                             '<div class="upload-info">{size:fileSize}</div>',
  27.                         '</div>',
  28.                     '</tpl>'
  29.                 ),
  30.                 store: new Ext.data.JsonStore({
  31.                     root: '',
  32.                     id: 'id',
  33.                     fields: [
  34.                         {name: 'creationdate', type: 'date'},
  35.                         {name: 'modificationdate', type: 'date'},
  36.                         'filestatus','id','index','name','size','type','dbid'
  37.                     ]
  38.                 }),
  39.                 itemSelector: 'div.upload-file',
  40.                 selectedClass: 'upload-file-selected',
  41.                 singleSelect: true
  42.             }],
  43.             tbar:[{
  44.                 text: 'Start Upload',
  45.                 handler: this.startUpload,
  46.                 scope: this,
  47.                 iconCls: 'start-upload'
  48.             },{
  49.                 text: 'Clear',
  50.                 handler: this.cancelUpload,
  51.                 scope: this,
  52.                 iconCls: 'cancel'
  53.             },'-',{
  54.                 text: 'Add to Album',
  55.                 handler: this.addAllAlbum,
  56.                 scope: this,
  57.                 iconCls: 'album-add'
  58.             },{
  59.                 text: 'Tag',
  60.                 handler: this.tagAll,
  61.                 scope: this,
  62.                 iconCls: 'tag'
  63.             },
  64.             '->',{
  65.                 xtype: 'checkbox',
  66.                 checked: this.autoRemove,
  67.                 listeners: {
  68.                     check: function(cb, checked) {
  69.                         this.autoRemove = checked;
  70.                     },
  71.                     scope: this
  72.                 }
  73.             },'Auto-Remove Uploaded']
  74.         });
  75.         Imgorg.UploadQueue.superclass.initComponent.call(this);
  76.         
  77.         this.progressBars = {};
  78.         
  79.         Ext.ux.SwfuMgr.on('filequeued', this.addFile, this);
  80.         Ext.ux.SwfuMgr.on('uploadprogress', this.updateProgress, this);
  81.         Ext.ux.SwfuMgr.on('uploadsuccess', this.uploadSuccess, this);
  82.     },
  83.     
  84.     getDv: function() {
  85.         if (!this.imgUplDv) {
  86.             this.imgUplDv = this.getComponent('img-uploaddv');
  87.         }
  88.         return this.imgUplDv;
  89.     },
  90.     
  91.     startUpload: function() {
  92.         this.swfu.startUpload();
  93.     },
  94.     
  95.     cancelUpload: function() {
  96.         this.swfu.cancelUpload();
  97.         for (var pb in this.progressBars) {
  98.             this.progressBars[pb].destroy();
  99.         }
  100.         this.getDv().store.removeAll();
  101.         this.uploaded = false;
  102.     },
  103.     
  104.     addFile: function(swfu, file) {
  105.         this.getDv().store.loadData([file], true);
  106.     },
  107.     
  108.     addAllAlbum: function(btn) {
  109.         if (!this.uploaded) {
  110.             Ext.Msg.alert('Warning', 'You must upload files before you can add them to an Album');
  111.             return;
  112.         }
  113.         var dv = this.getDv();
  114.         var recs = dv.getRecords(dv.getNodes());
  115.         if (!this.albumWin) {
  116.             this.albumWin = new Imgorg.AlbumWin();
  117.         }
  118.         this.albumWin.selectedRecords = recs;
  119.         this.albumWin.show(btn.btnEl.dom);
  120.     },
  121.     
  122.     tagAll: function(btn) {
  123.         if (!this.uploaded) {
  124.             Ext.Msg.alert('Warning', 'You must upload files before you can Tag them');
  125.             return;
  126.         }
  127.         var dv = this.getDv();
  128.         var recs = dv.getRecords(dv.getNodes());
  129.         Imgorg.TagWin.selectedRecords = recs;
  130.         Imgorg.TagWin.show(btn.btnEl.dom);
  131.     },
  132.     
  133.     updateProgress: function(swfu, file, complete, total) {
  134.         if (this.progressBars[file.id]) {
  135.             this.progressBars[file.id].updateProgress(file.percentUploaded/100,Math.round(file.percentUploaded)+'% Completed... '+Ext.util.Format.fileSize(file.currentSpeed)+'s');
  136.         } else {
  137.             this.progressBars[file.id] = new Ext.ProgressBar({
  138.                 text:'0% Completed...',
  139.                 renderTo: file.id+'-pb'
  140.             });
  141.         }
  142.     },
  143.     
  144.     uploadSuccess: function(swfu, file, data) {
  145.         var store = this.getDv().store;
  146.         var rec = store.getById(file.id);
  147.         if (this.progressBars[file.id]) {
  148.             this.progressBars[file.id].updateProgress(1, '100% Completed...');
  149.         }
  150.         if (this.autoRemove) {
  151.             store.remove(rec);
  152.         }
  153.         var data = Ext.decode(Ext.util.Format.stripTags(data));
  154.         rec.data.dbid = data.result.res.id;
  155.         this.uploaded = true;
  156.     }
  157. });
  158. Ext.reg('img-uploadqueue', Imgorg.UploadQueue);
  159. Ext.ux.SwfuManager = Ext.extend(Ext.util.Observable, {
  160.     constructor: function(config) {
  161.         Ext.ux.SwfuManager.superclass.constructor.call(this, config);
  162.         this.addEvents(
  163.             'filequeued',
  164.             'uploadstart',
  165.             'uploadprogress',
  166.             'uploaderror',
  167.             'uploadsuccess'
  168.         );
  169.     }
  170. });
  171. Ext.ux.SwfuMgr = new Ext.ux.SwfuManager();