ProgressBarPager.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:3k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. /**
  8. * @class Ext.ux.ProgressBarPager
  9. * @extends Object 
  10. * Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
  11. * @ptype progressbarpager 
  12. * @constructor
  13. * Create a new ItemSelector
  14. * @param {Object} config Configuration options
  15. * @xtype itemselector 
  16. */
  17. Ext.ux.ProgressBarPager  = Ext.extend(Object, {
  18. /**
  19.   * @cfg {Integer} progBarWidth
  20.   * <p>The default progress bar width.  Default is 225.</p>
  21. */
  22. progBarWidth   : 225,
  23. /**
  24.   * @cfg {String} defaultText
  25. * <p>The text to display while the store is loading.  Default is 'Loading...'</p>
  26.   */
  27. defaultText    : 'Loading...',
  28.      /**
  29.   * @cfg {Object} defaultAnimCfg 
  30.   * <p>A {@link Ext.Fx Ext.Fx} configuration object.  Default is  { duration : 1, easing : 'bounceOut' }.</p>
  31.   */
  32. defaultAnimCfg : {
  33. duration   : 1,
  34. easing     : 'bounceOut'
  35. },   
  36. constructor : function(config) {
  37. if (config) {
  38. Ext.apply(this, config);
  39. }
  40. },
  41. //public
  42. init : function (parent) {
  43. if(parent.displayInfo){
  44. this.parent = parent;
  45. var ind  = parent.items.indexOf(parent.displayItem);
  46. parent.remove(parent.displayItem, true);
  47. this.progressBar = new Ext.ProgressBar({
  48. text    : this.defaultText,
  49. width   : this.progBarWidth,
  50. animate :  this.defaultAnimCfg
  51. });
  52.    
  53. parent.displayItem = this.progressBar;
  54. parent.add(parent.displayItem);
  55. parent.doLayout();
  56. Ext.apply(parent, this.parentOverrides);
  57. this.progressBar.on('render', function(pb) {
  58. pb.el.applyStyles('cursor:pointer');
  59. pb.el.on('click', this.handleProgressBarClick, this);
  60. }, this);
  61. // Remove the click handler from the 
  62. this.progressBar.on({
  63. scope         : this,
  64. beforeDestroy : function() {
  65. this.progressBar.el.un('click', this.handleProgressBarClick, this);
  66. }
  67. });
  68. }
  69.   
  70. },
  71. // private
  72. // This method handles the click for the progress bar
  73. handleProgressBarClick : function(e){
  74. var parent = this.parent;
  75. var displayItem = parent.displayItem;
  76. var box = this.progressBar.getBox();
  77. var xy = e.getXY();
  78. var position = xy[0]-box.x;
  79. var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize);
  80. var newpage = Math.ceil(position/(displayItem.width/pages));
  81. parent.changePage(newpage);
  82. },
  83. // private, overriddes
  84. parentOverrides  : {
  85. // private
  86. // This method updates the information via the progress bar.
  87. updateInfo : function(){
  88. if(this.displayItem){
  89. var count   = this.store.getCount();
  90. var pgData  = this.getPageData();
  91. var pageNum = this.readPage(pgData);
  92. var msg    = count == 0 ?
  93. this.emptyMsg :
  94. String.format(
  95. this.displayMsg,
  96. this.cursor+1, this.cursor+count, this.store.getTotalCount()
  97. );
  98. pageNum = pgData.activePage; ;
  99. var pct = pageNum / pgData.pages;
  100. this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
  101. }
  102. }
  103. }
  104. });
  105. Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);