Blame view

WebRoot/plugins/websocketInstantMsg/ext4/ux/ProgressBarPager.js 3 KB
ad5081d3   孙向锦   初始化项目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
  /**
  * @class Ext.ux.ProgressBarPager
  * @extends Object
  * Plugin for displaying a progressbar inside of a paging toolbar instead of plain text
  * @constructor
  * Create a new ItemSelector
  * @param {Object} config Configuration options
  */
  Ext.define('Ext.ux.ProgressBarPager', {
      extend: 'Object',
  
      requires: ['Ext.ProgressBar'],
      /**
       * @cfg {Integer} width
       * <p>The default progress bar width.  Default is 225.</p>
      */
      width   : 225,
      /**
       * @cfg {String} defaultText
      * <p>The text to display while the store is loading.  Default is 'Loading...'</p>
       */
      defaultText    : 'Loading...',
      /**
       * @cfg {Object} defaultAnimCfg
       * <p>A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
       */
      constructor : function(config) {
          if (config) {
              Ext.apply(this, config);
          }
      },
      //public
      init : function (parent) {
          var displayItem;
          if(parent.displayInfo) {
              this.parent = parent;
  
              displayItem = parent.child("#displayItem");
              if (displayItem) {
                  parent.remove(displayItem, true);
              }
  
              this.progressBar = Ext.create('Ext.ProgressBar', {
                  text    : this.defaultText,
                  width   : this.width,
                  animate : this.defaultAnimCfg
              });
  
              parent.displayItem = this.progressBar;
  
              parent.add(parent.displayItem);
              parent.doLayout();
              Ext.apply(parent, this.parentOverrides);
  
              this.progressBar.on('render', function(pb) {
                  pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
              }, this, {single: true});
          }
      },
      // 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.ceil(position/(displayItem.width/pages));
  
          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.currentPage / pageData.pageCount;
  
                  this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
              }
          }
      }
  });