Erhan is typing…

WebDevelopment , PHP, Javascript, CakePHP, ExtJS

Items Per Page Plugin for ExtJS

| Comments

It is a plugin to change dynamically the number of items displayed in a grid.

Code
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
/**
 * ExtJS component to display number of items per page
 * 
 * @copyright       2009 Erhan Abay
 * @author          Erhan Abay
 * @version         $Revision$
 * @lastmodified    $Date$
 */
Ext.ux.PerPageField = Ext.extend(Object, {

  beforeText : '',
  afterText : 'items per page',

  constructor : function(config) {
      Ext.apply(this, config);
  },

  init : function(grid) {
      this.grid = grid;

      this.grid.on({
          render : function() {
              this.grid.bottomToolbar.add(['-', '-',
                      this.beforeText, this.combo,
                      this.afterText]);
          },
          scope : this
      });

      this.combo = new Ext.form.ComboBox({
          store : ['5', '10', '20', '50', '100', '200'],
          mode : 'local',
          triggerAction : 'all',
          width : 50,
          listClass : 'x-combo-list-small',
          maskRe : /^[0-9]$/,
          value : grid.bottomToolbar.pageSize,
          listeners : {
              'collapse' : function(f) {
                  this.triggerEvent(f);
              },

              'specialkey' : function(f, e) {
                  if (e.getKey() == e.ENTER) {
                      this.triggerEvent(f);
                  }
              },
              scope : this
          }
      });
  },

  triggerEvent : function(f) {
      var o = {
          start : 0
      };
      var v = parseInt(f.getRawValue());
      this.grid.store.baseParams = this.grid.store.baseParams || {};
      this.grid.store.baseParams['limit'] = v;
      this.grid.bottomToolbar.pageSize = v;
      this.grid.store.reload({
          params : o
      });
  }
});

Ext.preg('perpagefield', Ext.ux.PerPageField);
Usage
1
2
3
4
5
6
7
8
9
var grid = new Ext.grid.GridPanel({
...
    plugins: [{
        ptype: 'perpagefield',
        beforeText: '',
        afterText: ''
    }],
...
});

Comments