/** * {@link Ext.ProgressIndicator} provides a progress indicator for file uploads. */Ext.define('Ext.ProgressIndicator', { extend: 'Ext.Container', mixins: ['Ext.mixin.Progressable'], xtype: 'progressindicator', config: { baseCls: Ext.baseCSSPrefix + 'progressindicator', hidden: true, modal: true, centered: true, /** * @cfg {String/Ext.XTemplate/Object} loadingText * This template is used when progress is dynamic (many updates will be received). Template will be passed * and object with properties percent and state. * * If a String or XTemplate is given that text will be used for all states of loading. One can optionally pass in an object * with the properties 'upload' and/or 'download' with custom state templates. * * * @accessor */ loadingText: { any: 'Loading: {percent}%', upload: 'Uploading: {percent}%', download: 'Downloading: {percent}%' }, /** * @cfg {String/Object} fallbackText * This String is used when progress is not dynamic (only start and end events will be received). * * If a String is given that text will be used for all states of loading. One can optionally pass in an object * with the properties 'upload' and/or 'download' with custom state strings. * * @accessor */ fallbackText: { any: 'Loading', upload: 'Uploading', download: 'Downloading' }, /** * @cfg {Object} monitoredStates * Object with the properties of 'upload' and 'download'. To disable progress monitoring of any state simply set * it to false. For example: * * monitoredStates: { * upload:false * } * * @accessor */ monitoredStates: { upload: true, download: true }, showAnimation: !Ext.browser.is.AndroidStock ? { type: 'slideIn', direction: "left", duration: 250, easing: 'ease-out' } : null, hideAnimation: !Ext.browser.is.AndroidStock ? { type: 'slideOut', direction: "left", duration: 250, easing: 'ease-in' } : null, /** * @private */ minProgressOutput: 0, /** * @private */ maxProgressOutput: 1, /** * @private */ state: null }, constructor: function() { this.emptyTpl = new Ext.XTemplate(""); this.callParent(arguments); }, getElementConfig: function() { return { reference: 'element', classList: ['x-container', 'x-unsized'], children: [ { reference: 'innerElement', className: Ext.baseCSSPrefix + 'progressindicator-inner', children: [ { reference: 'progressBarText', className: Ext.baseCSSPrefix + 'progressindicator-text' }, { reference: 'progressBar', className: Ext.baseCSSPrefix + 'progressindicator-bar', children: [ { reference: 'progressBarFill', className: Ext.baseCSSPrefix + 'progressindicator-bar-fill' } ] } ] } ] }; }, onStartProgress: function() { if (!this.getParent()) { Ext.Viewport.add(this); } this.show(); }, onEndProgress: function() { this.hide(); }, onUpdateProgress: function() { this.updateBar(); }, getLoadingText: function() { var state = this.getState(); if (this._loadingText[state]) { return this._loadingText[state]; } if (this._loadingText["any"]) { return this._loadingText["any"]; } return this.emptyTpl; }, applyLoadingText: function(loadingText) { var tpl = {}, property, value; if (Ext.isString(loadingText)) { tpl = { any: new Ext.XTemplate(loadingText) } } else if (loadingText instanceof Ext.XTemplate) { tpl = { any: loadingText } } else { for (property in loadingText) { value = loadingText[property]; tpl[property] = new Ext.XTemplate(value); } } if (!tpl.any) { tpl.any = this.emptyTpl; } return tpl; }, getFallbackText: function() { var state = this.getState(); if (this._fallbackText[state]) { return this._fallbackText[state]; } if(this._fallbackText["any"]) { return this._fallbackText["any"]; } return ""; }, applyFallbackText: function(fallbackText) { var obj = {}, property, value; if (Ext.isString(fallbackText)) { obj = { any: fallbackText } } else { for (property in fallbackText) { value = fallbackText[property]; obj[property] = value; } } if (!obj.any) { obj.any = this.emptyTpl; } return obj; }, updateDynamic: function(value) { if (!value) { this.progressBarText.setHtml(this.getFallbackText()); this.progressBar.setWidth("100%"); } else { this.updateBar(); } return value; }, updateBar: function() { var state = this.getState(); if(this.getMonitoredStates()[state] !== true) { this.progressBarText.setHtml(this.getFallbackText()); this.progressBar.setWidth("100%"); return; } var percent = this.getProgress() * 100; if (!Ext.isNumber(percent)) percent = 0; this.progressBar.setWidth(percent + "%"); var loadingText = this.getLoadingText(); if (loadingText) { this.progressBarText.setHtml(this.getLoadingText().apply({state:state, percent: Math.ceil(percent) || 0})); } else { this.progressBarText.setHtml(''); } }});