lixinru
/
YtIoT


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-ux-ProgressBarPager-method-constructor'><span id='Ext-ux-ProgressBarPager'>/**
</span></span>* @class Ext.ux.ProgressBarPager
* @extends Object
* Plugin for displaying a progressbar inside of a paging toolbar instead of plain text
* @constructor
* Create a new ProgressBarPager
* @param {Object} config Configuration options
*/
Ext.define('Ext.ux.ProgressBarPager', {

    requires: ['Ext.ProgressBar'],
<span id='Ext-ux-ProgressBarPager-cfg-width'>    /**
</span>     * @cfg {Number} width
     * &lt;p&gt;The default progress bar width.  Default is 225.&lt;/p&gt;
    */
    width   : 225,
<span id='Ext-ux-ProgressBarPager-cfg-defaultText'>    /**
</span>     * @cfg {String} defaultText
    * &lt;p&gt;The text to display while the store is loading.  Default is 'Loading...'&lt;/p&gt;
     */
    defaultText    : 'Loading...',
<span id='Ext-ux-ProgressBarPager-cfg-defaultAnimCfg'>    /**
</span>     * @cfg {Object} defaultAnimCfg
     * &lt;p&gt;A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.&lt;/p&gt;
     */
    defaultAnimCfg : {
		duration: 1000,
		easing: 'bounceOut'	
	},	
    
    constructor : function(config) {
        if (config) {
            Ext.apply(this, config);
        }
    },
    //public
    init : function (parent) {
        var displayItem;
        if (parent.displayInfo) {
            this.parent = parent;

            displayItem = parent.child(&quot;#displayItem&quot;);
            if (displayItem) {
                parent.remove(displayItem, true);
            }

            this.progressBar = Ext.create('Ext.ProgressBar', {
                text    : this.defaultText,
                width   : this.width,
                animate : this.defaultAnimCfg,
                style: {
                    cursor: 'pointer'
                },
                listeners: {
                    el: {
                        scope: this,
                        click: this.handleProgressBarClick
                    }
                }
            });

            parent.displayItem = this.progressBar;

            parent.add(parent.displayItem);
            Ext.apply(parent, this.parentOverrides);
        }
    },
    // private
    // This method handles the click for the progress bar
    handleProgressBarClick : function(e){
        var parent = this.parent,
            displayItem = parent.displayItem,
            box = this.progressBar.getBox(),
            xy = e.getXY(),
            position = xy[0]- box.x,
            pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize),
            newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);

        parent.store.loadPage(newPage);
    },

    // private, overriddes
    parentOverrides  : {
        // private
        // This method updates the information via the progress bar.
        updateInfo : function(){
            if(this.displayItem){
                var count = this.store.getCount(),
                    pageData = this.getPageData(),
                    message = count === 0 ?
                    this.emptyMsg :
                    Ext.String.format(
                        this.displayMsg,
                        pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
                    ),
                    percentage = pageData.pageCount &gt; 0 ? (pageData.currentPage / pageData.pageCount) : 0;

                this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
            }
        }
    }
});

</pre>
</body>
</html>