add extjs 6.0.1 sources

[extjs.git] / extjs / packages / core / src / Progress.js

/**\r
 * A simple progress bar widget.\r
 *\r
 * You are responsible for showing, updating (via {@link #setValue}) and clearing the\r
 * progress bar as needed from your own code. This method is most appropriate when you\r
 * want to show progress throughout an operation that has predictable points of interest\r
 * at which you can update the control.\r
 *\r
 *     @example\r
 *     var store = Ext.create('Ext.data.Store', {\r
 *         fields: ['name', 'progress'],\r
 *         data: [\r
 *             { name: 'Lisa', progress: .159 },\r
 *             { name: 'Bart', progress: .216 },\r
 *             { name: 'Homer', progress: .55 },\r
 *             { name: 'Maggie', progress: .167 },\r
 *             { name: 'Marge', progress: .145 }\r
 *         ]\r
 *     });\r
 *\r
 *     Ext.create('Ext.grid.Panel', {\r
 *         title: 'Simpsons',\r
 *         store: store,\r
 *         columns: [\r
 *             { text: 'Name',  dataIndex: 'name' },\r
 *             {\r
 *                 text: 'Progress',\r
 *                 xtype: 'widgetcolumn',\r
 *                 width: 120,\r
 *                 dataIndex: 'progress',\r
 *                 widget: {\r
 *                     xtype: 'progress'\r
 *                 }\r
 *             }\r
 *         ],\r
 *         height: 200,\r
 *         width: 400,\r
 *         renderTo: Ext.getBody()\r
 *     });\r
 *\r
 */\r
Ext.define('Ext.Progress', {\r
    extend: 'Ext.Widget',\r
    xtype: [ 'progress', 'progressbarwidget' ],\r
    alternateClassName: 'Ext.ProgressBarWidget',\r
\r
    mixins: [\r
        'Ext.ProgressBase'\r
    ],\r
\r
    config: {\r
        /**\r
         * @cfg {String} [text]\r
         * The background text\r
         */\r
        text: null,\r
\r
        /**\r
         * @cfg {Boolean} [animate=false]\r
         * Specify as `true` to have this progress bar animate to new extent when updated.\r
         */\r
        animate: false\r
    },\r
\r
    cachedConfig: {\r
        /**\r
         * @cfg {String} [baseCls='x-progress']\r
         * The base CSS class to apply to the progress bar's wrapper element.\r
         */\r
        baseCls: Ext.baseCSSPrefix + 'progress',\r
\r
        textCls: Ext.baseCSSPrefix + 'progress-text',\r
\r
        cls: null,\r
\r
        ui: null\r
    },\r
\r
    template: [{\r
        reference: 'backgroundEl'\r
    }, {\r
        reference: 'barEl',\r
        children: [{\r
            reference: 'textEl'\r
        }]\r
    }],\r
\r
    defaultBindProperty: 'value',\r
\r
    updateWidth: function(width, oldWidth) {\r
        var me = this;\r
\r
        me.callParent([width, oldWidth]);\r
        width -= me.element.getBorderWidth('lr');\r
        me.backgroundEl.setWidth(width);\r
        me.textEl.setWidth(width);\r
    },\r
\r
    updateCls: function(cls, oldCls) {\r
        var el = this.element;\r
\r
        if (oldCls) {\r
            el.removeCls(oldCls);\r
        }\r
\r
        if (cls) {\r
            el.addCls(cls);\r
        }\r
    },\r
\r
    updateUi: function(ui, oldUi) {\r
        var element = this.element,\r
            barEl = this.barEl,\r
            baseCls = this.getBaseCls() + '-';\r
\r
        if (oldUi) {\r
            element.removeCls(baseCls + oldUi);\r
            barEl.removeCls(baseCls + 'bar-' + oldUi);\r
        }\r
\r
        element.addCls(baseCls + ui);\r
        barEl.addCls(baseCls + 'bar-' + ui);\r
    },\r
\r
    updateBaseCls: function(baseCls, oldBaseCls) {\r
        //<debug>\r
        if (oldBaseCls) {\r
            Ext.raise('You cannot configure baseCls - use a subclass');\r
        }\r
        //</debug>\r
        this.element.addCls(baseCls);\r
        this.barEl.addCls(baseCls + '-bar');\r
    },\r
\r
    updateTextCls: function(textCls) {\r
        this.backgroundEl.addCls(textCls + ' ' + textCls + '-back');\r
        this.textEl.addCls(textCls);\r
    },\r
\r
    updateValue: function(value, oldValue) {\r
        var me = this,\r
            barEl = me.barEl,\r
            textTpl = me.getTextTpl();\r
\r
        if (textTpl) {\r
            me.setText(textTpl.apply({\r
                value: value,\r
                percent: Math.round(value * 100)\r
            }));\r
        }\r
        if (me.getAnimate()) {\r
            barEl.stopAnimation();\r
            barEl.animate(Ext.apply({\r
                from: {\r
                    width: (oldValue * 100) + '%'\r
                },\r
                to: {\r
                    width: (value * 100) + '%'\r
                }\r
            }, me.animate));\r
        } else {\r
            barEl.setStyle('width', (value * 100) + '%');\r
        }\r
    },\r
\r
    updateText: function(text) {\r
        this.backgroundEl.setHtml(text);\r
        this.textEl.setHtml(text);\r
    }\r
});\r