에 extjs의 이미지와 진행 표시 줄 내가 ExtJS에 5.2.1을 사용하고

Question

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

. Ext.ProgressBar를 사용하여 진행률 표시 줄을 만들었으며 이제는 스타일을 수행해야합니다. 이것에 대한 스타일링은 무엇이되어야 하는가?

Answer 1

귀하의 요구 사항에 따라 progressbar을 연장하여 Ext.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...!'); 
    } 
});