Question

I need a progress bar just like the one in the image.

我正在使用ExtJS 5.2.1。我使用Ext.ProgressBar创建了进度条，现在我需要进行样式设置。这个样式应该是什么？

Answer 1

根据您的要求，您可以通过展开Ext.ProgressBar来创建自定义progressbar。

我在fiddle创建了一个小型演示。这将指导您实现您的要求。

//Create custom progress bar from extending {Ext.ProgressBar}
Ext.define('customeProgresbar', {
    extend: 'Ext.ProgressBar',
    /**
     * Updates the progress bar value, and optionally its text.
     *
     * If the text argument is not specified, then the {@link #textTpl} will be used to generate the text.
     * If there is no `textTpl`, any existing text value will be unchanged. To blank out existing text, pass `""`.
     *
     * Note that even if the progress bar value exceeds 1, it will never automatically reset --
     * you are responsible for determining when the progress is complete and
     * calling {@link #reset} to clear and/or hide the control.
     * @param {Number} [value=0] A floating point value between 0 and 1 (e.g., .5)
     * @param {String} [text=''] The string to display in the progress text element
     * @param {Boolean} [animate=false] Whether to animate the transition of the progress bar. If this value is not
     * specified, the default for the class is used
     * @return {Ext.ProgressBar} this
     */
    updateProgress: function (value, text, animate) {
        value = value || 0;

        var me = this,
            oldValue = me.value,
            textTpl = me.getTextTpl();

        // Ensure value is not undefined.
        me.value = value || (value = 0);

        // Empty string (falsy) must blank out the text as per docs.
        if (text != null) {
            me.updateText(text);
        }
        // Generate text using template and progress values.
        else if (textTpl) {
            me.updateText(textTpl.apply({
                value: value,
                percent: value * 100
            }));
        }
        if (me.rendered && !me.isDestroyed) {
            if (animate === true || (animate !== false && me.animate)) {
                me.bar.stopAnimation();
                //Set left instead of width as per Requirement
                me.bar.animate(Ext.apply({
                    from: {
                        left: (oldValue * 100) + '%'
                    },
                    to: {
                        left: (value * 100) + '%'
                    }
                }, me.animate));
            } else {
                //Set left instead of width as per Requirement
                me.bar.setStyle('left', (value * 100) + '%');
            }
        }
        me.fireEvent('update', me, value, text);
        return me;
    }
});

//Create progressBar
var progressBar = Ext.create('customeProgresbar', {
    renderTo: Ext.getBody(),
    width: 300,
    margin: 10
});
//set style on bar
progressBar.bar.setWidth(20).setStyle({
    backgroundImage: 'url(http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/blue-jelly-icons-arrows/007386-blue-jelly-icon-arrows-arrowhead2-right.png)',
    backgroundPosition: 'left',
    backgroundColor: 'transparent',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat'
});
// Wait for 5 seconds, then update the status el (progress bar will auto-reset)
progressBar.wait({
    interval: 250, //bar will move fast!
    duration: 20000,
    increment: 15,
    scope: this,
    fn: function () {
        progressBar.updateText('Done...!');
    }
});

一个带有extjs图像的进度条

1 个答案: