/** * A simple progress bar widget. * * You are responsible for showing, updating (via {@link #setValue}) and clearing the * progress bar as needed from your own code. This method is most appropriate when you * want to show progress throughout an operation that has predictable points of interest * at which you can update the control. */Ext.define('Ext.Progress', { extend: 'Ext.Gadget', xtype: ['progress', 'progressbarwidget'], alternateClassName: 'Ext.ProgressBarWidget', mixins: [ 'Ext.ProgressBase' ], config: { /** * @cfg {String} [text] * The background text */ text: null, /** * @cfg {Boolean} [animate=false] * Specify as `true` to have this progress bar animate to new extent when updated. */ animate: false }, cachedConfig: { textCls: Ext.baseCSSPrefix + 'progress-text', cls: null }, baseCls: Ext.baseCSSPrefix + 'progress', template: [{ reference: 'backgroundEl' }, { reference: 'barEl', cls: Ext.baseCSSPrefix + 'progress-bar', children: [{ reference: 'textEl' }] }], defaultBindProperty: 'value', updateCls: function(cls, oldCls) { var el = this.element; if (oldCls) { el.removeCls(oldCls); } if (cls) { el.addCls(cls); } }, updateUi: function(ui, oldUi) { var element = this.element, barEl = this.barEl, baseCls = this.baseCls + '-'; this.callParent([ui, oldUi]); if (oldUi) { element.removeCls(baseCls + oldUi); barEl.removeCls(baseCls + 'bar-' + oldUi); } element.addCls(baseCls + ui); barEl.addCls(baseCls + 'bar-' + ui); }, updateTextCls: function(textCls) { this.backgroundEl.addCls(textCls + ' ' + textCls + '-back'); this.textEl.addCls(textCls); }, updateValue: function(value, oldValue) { var me = this, textTpl = me.getTextTpl(); if (textTpl) { me.setText(textTpl.apply({ value: value, percent: Math.round(value * 100) })); } if (!me.isConfiguring && me.getAnimate()) { me.stopBarAnimation(); me.startBarAnimation(Ext.apply({ from: { width: (oldValue * 100) + '%' }, to: { width: (value * 100) + '%' } }, me.animate)); } else { me.barEl.setStyle('width', (value * 100) + '%'); } }, updateText: function(text) { this.backgroundEl.setHtml(text); this.textEl.setHtml(text); }, doDestroy: function() { this.stopBarAnimation(); this.callParent(); }, privates: { startBarAnimation: Ext.privateFn, stopBarAnimation: Ext.privateFn }});