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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
| Ext.define('KitchenSink.view.grid.ProgressBarPager', {
| extend: 'Ext.grid.Panel',
|
| requires: [
| 'Ext.data.*',
| 'Ext.grid.*',
| 'Ext.util.*',
| 'Ext.toolbar.Paging',
| 'Ext.ux.ProgressBarPager',
| 'KitchenSink.model.Company'
| ],
| xtype: 'progress-bar-pager',
|
| //<example>
| exampleTitle: 'Progress Bar Pager Extension',
| exampleDescription: '<p>This example demonstrates using a custom paging display.</p>',
| themes: {
| classic: {
| width: 600,
| percentChangeColumnWidth: 75,
| lastUpdatedColumnWidth: 85
| },
| neptune: {
| width: 650,
| percentChangeColumnWidth: 100,
| lastUpdatedColumnWidth: 115
| }
| },
| //</example>
|
| stripeRows: true,
| height: 320,
| frame: true,
| title: 'Progress Bar Pager',
|
| initComponent: function() {
| this.width = this.themeInfo.width;
|
| var store = new Ext.data.Store({
| model: KitchenSink.model.Company,
| remoteSort: true,
| pageSize: 10,
| proxy: {
| type: 'memory',
| enablePaging: true,
| data: KitchenSink.data.DataSets.company,
| reader: {
| type: 'array'
| }
| }
| });
|
| Ext.apply(this, {
| store: store,
| columns: [{
| text: 'Company',
| sortable: true,
| dataIndex: 'company',
| flex: 1
| },{
| text: 'Price',
| sortable: true,
| renderer: Ext.util.Format.usMoney,
| dataIndex: 'price',
| width: 75
| },{
| text: 'Change',
| sortable: true,
| renderer: this.changeRenderer,
| dataIndex: 'change',
| width: 80
| },{
| text: '% Change',
| sortable: true,
| renderer: this.pctChangeRenderer,
| dataIndex: 'pctChange',
| width: this.themeInfo.percentChangeColumnWidth
| },{
| text: 'Last Updated',
| sortable: true,
| dataIndex: 'lastChange',
| width: this.themeInfo.lastUpdatedColumnWidth,
| renderer: Ext.util.Format.dateRenderer('m/d/Y')
| }],
| bbar: {
| xtype: 'pagingtoolbar',
| pageSize: 10,
| store: store,
| displayInfo: true,
| plugins: new Ext.ux.ProgressBarPager()
| }
| });
| this.callParent();
| },
|
| afterRender: function(){
| this.callParent(arguments);
| this.getStore().load();
| },
|
| changeRenderer: function(val) {
| if (val > 0) {
| return '<span style="color:green;">' + val + '</span>';
| } else if(val < 0) {
| return '<span style="color:red;">' + val + '</span>';
| }
| return val;
| },
|
| pctChangeRenderer: function(val){
| if (val > 0) {
| return '<span style="color:green;">' + val + '%</span>';
| } else if(val < 0) {
| return '<span style="color:red;">' + val + '%</span>';
| }
| return val;
| }
| });
|
|
