ExtJs框架系列之图片批量显示，上传，删除

Ext.namespace("Ext.ux.Utils"); Ext.ux.Utils.EventQueue = function(handler, scope) { if (!handler) { throw "Handler is required." } this.handler = handler; this.scope = scope || window; this.queue = []; this.is_processing = false; this.postEvent = function(event, data) { data = data || null; this.queue.push({ event : event, data : data }); if (!this.is_processing) { this.process() } }; this.flushEventQueue = function() { this.queue = [] }, this.process = function() { while (this.queue.length > 0) { this.is_processing = true; var event_data = this.queue.shift(); this.handler.call(this.scope, event_data.event, event_data.data) } this.is_processing = false } }; Ext.ux.Utils.FSA = function(initial_state, trans_table, trans_table_scope) { this.current_state = initial_state; this.trans_table = trans_table || {}; this.trans_table_scope = trans_table_scope || window; Ext.ux.Utils.FSA.superclass.constructor.call(this, this.processEvent, this) }; Ext.extend(Ext.ux.Utils.FSA, Ext.ux.Utils.EventQueue, { current_state : null, trans_table : null, trans_table_scope : null, state : function() { return this.current_state }, processEvent : function(event, data) { var transitions = this.currentStateEventTransitions(event); if (!transitions) { throw "State '" + this.current_state + "' has no transition for event '" + event + "'." } for (var i = 0, len = transitions.length; i < len; i++) { var transition = transitions[i]; var predicate = transition.predicate || transition.p || true; var action = transition.action || transition.a || Ext.emptyFn; var new_state = transition.state || transition.s || this.current_state; var scope = transition.scope || this.trans_table_scope; if (this.computePredicate(predicate, scope, data, event)) { this.callAction(action, scope, data, event); this.current_state = new_state; return } } throw "State '" + this.current_state + "' has no transition for event '" + event + "' in current context" }, currentStateEventTransitions : function(event) { return this.trans_table[this.current_state] ? this.trans_table[this.current_state][event] || false : false }, computePredicate : function(predicate, scope, data, event) { var result = false; switch (Ext.type(predicate)) { case "function" : result = predicate.call(scope, data, event, this); break; case "array" : result = true; for (var i = 0, len = predicate.length; result && (i < len); i++) { if (Ext.type(predicate[i]) == "function") { result = predicate[i].call(scope, data, event, this) } else { throw ["Predicate: ", predicate[i], ' is not callable in "', this.current_state, '" state for event "', event].join("") } } break; case "boolean" : result = predicate; break; default : throw ["Predicate: ", predicate, ' is not callable in "', this.current_state, '" state for event "', event] .join("") } return result }, callAction : function(action, scope, data, event) { switch (Ext.type(action)) { case "array" : for (var i = 0, len = action.length; i < len; i++) { if (Ext.type(action[i]) == "function") { action[i].call(scope, data, event, this) } else { throw ["Action: ", action[i], ' is not callable in "', this.current_state, '" state for event "', event].join("") } } break; case "function" : action.call(scope, data, event, this); break; default : throw ["Action: ", action, ' is not callable in "', this.current_state, '" state for event "', event] .join("") } } }); Ext.namespace("Ext.ux.UploadDialog"); Ext.ux.UploadDialog.BrowseButton = Ext.extend(Ext.Button, { input_name : "file", input_file : null, original_handler : null, original_scope : null, initComponent : function() { Ext.ux.UploadDialog.BrowseButton.superclass.initComponent.call(this); this.original_handler = this.handler || null; this.original_scope = this.scope || window; this.handler = null; this.scope = null }, onRender : function(ct, position) { Ext.ux.UploadDialog.BrowseButton.superclass.onRender.call(this, ct, position); this.createInputFile() }, createInputFile : function() { var button_container = this.el.child(".x-btn-center"); button_container.position("relative"); this.input_file = Ext.DomHelper.append(button_container, { tag : "input", type : "file", size : 1, name : this.input_name || Ext.id(this.el), style : "position: absolute; display: block; border: none; cursor: pointer" }, true); var button_box = button_container.getBox(); this.input_file.setStyle("font-size", (button_box.width * 0.5) + "px"); var input_box = this.input_file.getBox(); var adj = { x : 3, y : 3 }; if (Ext.isIE) { adj = { x : 0, y : 3 } } this.input_file.setLeft(button_box.width - input_box.width + adj.x + "px"); this.input_file.setTop(button_box.height - input_box.height + adj.y + "px"); this.input_file.setOpacity(0); if (this.handleMouseEvents) { this.input_file.on("mouseover", this.onMouseOver, this); this.input_file.on("mousedown", this.onMouseDown, this) } if (this.tooltip) { if (typeof this.tooltip == "object") { Ext.QuickTips.register(Ext.apply({ target : this.input_file }, this.tooltip)) } else { this.input_file.dom[this.tooltipType] = this.tooltip } } this.input_file.on("change", this.onInputFileChange, this); this.input_file.on("click", function(e) { e.stopPropagation() }) }, detachInputFile : function(no_create) { var result = this.input_file; no_create = no_create || false; if (typeof this.tooltip == "object") { Ext.QuickTips.unregister(this.input_file) } else { this.input_file.dom[this.tooltipType] = null } this.input_file.removeAllListeners(); this.input_file = null; if (!no_create) { this.createInputFile() } return result }, getInputFile : function() { return this.input_file }, disable : function() { Ext.ux.UploadDialog.BrowseButton.superclass.disable.call(this); this.input_file.dom.disabled = true }, enable : function() { Ext.ux.UploadDialog.BrowseButton.superclass.enable.call(this); this.input_file.dom.disabled = false }, destroy : function() { var input_file = this.detachInputFile(true); input_file.remove(); input_file = null; Ext.ux.UploadDialog.BrowseButton.superclass.destroy.call(this) }, onInputFileChange : function() { if (this.original_handler) { this.original_handler.call(this.original_scope, this) } } }); Ext.ux.UploadDialog.TBBrowseButton = Ext.extend( Ext.ux.UploadDialog.BrowseButton, { hideParent : true, onDestroy : function() { Ext.ux.UploadDialog.TBBrowseButton.superclass.onDestroy .call(this); if (this.container) { this.container.remove() } } }); Ext.ux.UploadDialog.FileRecord = Ext.data.Record.create([{ name : "filename" }, { name : "state", type : "int" }, { name : "note" }, { name : "input_element" }]); Ext.ux.UploadDialog.FileRecord.STATE_QUEUE = 0; Ext.ux.UploadDialog.FileRecord.STATE_FINISHED = 1; Ext.ux.UploadDialog.FileRecord.STATE_FAILED = 2; Ext.ux.UploadDialog.FileRecord.STATE_PROCESSING = 3; 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