Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / docs / source / ProgressBarPager.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.3.1
11  * Copyright(c) 2006-2010 Sencha Inc.
12  * licensing@sencha.com
13  * http://www.sencha.com/license
14  */
15 /**
16 * @class Ext.ux.ProgressBarPager
17 * @extends Object 
18 * Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
19
20 * @ptype progressbarpager 
21 * @constructor
22 * Create a new ItemSelector
23 * @param {Object} config Configuration options
24 * @xtype itemselector 
25 */
26 Ext.ux.ProgressBarPager  = Ext.extend(Object, {
27         <div id="cfg-Ext.ux.ProgressBarPager-progBarWidth"></div>/**
28         * @cfg {Integer} progBarWidth
29         * <p>The default progress bar width.  Default is 225.</p>
30         */
31         progBarWidth   : 225,
32         <div id="cfg-Ext.ux.ProgressBarPager-defaultText"></div>/**
33         * @cfg {String} defaultText
34         * <p>The text to display while the store is loading.  Default is 'Loading...'</p>
35         */
36         defaultText    : 'Loading...',
37         <div id="cfg-Ext.ux.ProgressBarPager-defaultAnimCfg"></div>/**
38         * @cfg {Object} defaultAnimCfg 
39         * <p>A {@link Ext.Fx Ext.Fx} configuration object.  Default is  { duration : 1, easing : 'bounceOut' }.</p>
40         */
41         defaultAnimCfg : {
42                 duration   : 1,
43                 easing     : 'bounceOut'        
44         },                                                                                                
45         constructor : function(config) {
46                 if (config) {
47                         Ext.apply(this, config);
48                 }
49         },
50         //public
51         init : function (parent) {
52                 
53                 if(parent.displayInfo){
54                         this.parent = parent;
55                         var ind  = parent.items.indexOf(parent.displayItem);
56                         parent.remove(parent.displayItem, true);
57                         this.progressBar = new Ext.ProgressBar({
58                                 text    : this.defaultText,
59                                 width   : this.progBarWidth,
60                                 animate :  this.defaultAnimCfg
61                         });                                     
62                    
63                         parent.displayItem = this.progressBar;
64                         
65                         parent.add(parent.displayItem); 
66                         parent.doLayout();
67                         Ext.apply(parent, this.parentOverrides);                
68                         
69                         this.progressBar.on('render', function(pb) {
70                 pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
71             }, this, {single: true});
72                                                 
73                 }
74                   
75         },
76         // private
77         // This method handles the click for the progress bar
78         handleProgressBarClick : function(e){
79                 var parent = this.parent,
80                     displayItem = parent.displayItem,
81                     box = this.progressBar.getBox(),
82                     xy = e.getXY(),
83                     position = xy[0]-box.x,
84                     pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
85                     newpage = Math.ceil(position/(displayItem.width/pages));
86             
87                 parent.changePage(newpage);
88         },
89         
90         // private, overriddes
91         parentOverrides  : {
92                 // private
93                 // This method updates the information via the progress bar.
94                 updateInfo : function(){
95                         if(this.displayItem){
96                                 var count = this.store.getCount(),
97                                     pgData = this.getPageData(),
98                                     pageNum = this.readPage(pgData),
99                                     msg = count == 0 ?
100                                         this.emptyMsg :
101                                         String.format(
102                                                 this.displayMsg,
103                                                 this.cursor+1, this.cursor+count, this.store.getTotalCount()
104                                         );
105                                         
106                                 pageNum = pgData.activePage; ;  
107                                 
108                                 var pct = pageNum / pgData.pages;       
109                                 
110                                 this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
111                         }
112                 }
113         }
114 });
115 Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
116
117 </pre>    
118 </body>
119 </html>