FadingButton.js (1527B)
1 Ext.define('PartKeepr.FadingButton', { 2 extend: 'Ext.Button', 3 4 /** 5 * Holds the fadeButtonTask 6 * @var object 7 */ 8 fadeButtonTask: null, 9 10 /** 11 * Holds the selector for the button's icon 12 * @var string 13 */ 14 selector: ".x-btn-icon", 15 16 /** 17 * Initializes the component and adds the fadeButtonTask. 18 */ 19 initComponent: function () { 20 this.callParent(); 21 22 this.fadeButtonTask = { 23 run: this.fadeButton, 24 interval: 10000, // No constant fading, because fading eats quite some CPU 25 scope: this 26 }; 27 28 }, 29 /** 30 * Adds an animation to the button's icon. This is only done once and needs to be refreshed (done automatically 31 * by startFading). 32 * 33 * @param none 34 * @return nothing 35 */ 36 fadeButton: function () { 37 var iconEl = this.getEl().down(this.selector); 38 39 iconEl.animate({ 40 duration: 1000, // One second 41 iterations: 1, 42 keyframes: { 43 50: { 44 opacity: 0 45 }, 46 100: { 47 opacity: 1 48 } 49 }}); 50 }, 51 /** 52 * Starts button fading by adding the task from the task manager 53 * @param none 54 * @return nothing 55 */ 56 startFading: function () { 57 Ext.TaskManager.start(this.fadeButtonTask); 58 }, 59 /** 60 * Stops button fading by removing the task from the task manager 61 * @param none 62 * @return nothing 63 */ 64 stopFading: function () { 65 Ext.TaskManager.stop(this.fadeButtonTask); 66 } 67 });