Ext JS PagingToolbar PageResizer组件

Problem

An Ext.PagingToolbar allows paging over a large amount of data in chunks of predefined size. Adding it to a grid is pretty straightforward:

1. bbar: new Ext.PagingToolbar({

2.   pageSize: 10,

3.   store: store,

4.   displayInfo: true

5. })

and it works perfectly with fixed size grids, however, when grid is placed in a resizable window, a possibility of changing pageSize parameters becomes desired.

PageSliderResizer

PageSliderResizer is a plugin which uses a slider to get desired pageSize value.

01. Ext.namespace('Ext.ux.plugins');

02.   

03. Ext.ux.plugins.PageSliderResizer = Ext.extend(Object, {

04.   

05.   pageSizes: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500],

06.   tipText: 'Showing <b>{0}</b> records per page.',

07.   

08.   constructor: function(config){

09.     Ext.apply(this, config);

10.     Ext.ux.plugins.PageSliderResizer.superclass.constructor.call(this, config);

11.   },

12.   

13.   init : function(pagingToolbar){

14.   

15.     var ps = this.pageSizes;

16.     var sv = 0;

17.     Ext.each(this.pageSizes, function(ps, i) {

18.       if (ps==pagingToolbar.pageSize) {

19.         sv = i;

20.         return;

21.       }

22.     });

23.   

24.     var tt = this.tipText;

25.     var slider = new Ext.Slider({

26.       width: 115,

27.       value: sv,

28.       minValue: 0,

29.       maxValue: ps.length-1,

30.       plugins: new Ext.ux.SliderTip({

31.         getText : function(slider){return String.format(tt, ps[slider.getValue()]);}

32.       }),

33.       listeners: {

34.         changecomplete: function(s, v){

35.           pagingToolbar.pageSize = ps[v];

36.           var rowIndex = 0;

37.           var gp = pagingToolbar.findParentBy (

38.             function (ct, cmp) {return (ct instanceof Ext.grid.GridPanel) ? true : false;}

39.           );

40.           var sm = gp.getSelectionModel();

41.           if (undefined != sm && sm.hasSelection()) {

42.             if (sm instanceof Ext.grid.RowSelectionModel) {

43.               rowIndex = gp.store.indexOf( sm.getSelected() ) ;

44.             } else if (sm instanceof Ext.grid.CellSelectionModel) {

45.               rowIndex = sm.getSelectedCell()[0] ;

46.             }

47.           }

48.           rowIndex += pagingToolbar.cursor;

49.           pagingToolbar.doLoad(Math.floor(rowIndex/pagingToolbar.pageSize)*pagingToolbar.pageSize);

50.         }

51.       }

52.     });

53.   

54.     var inputIndex = pagingToolbar.items.indexOf(pagingToolbar.refresh);

55.     pagingToolbar.insert(++inputIndex,'-');

56.     pagingToolbar.insert(++inputIndex, slider);

57.     pagingToolbar.on({

58.       beforedestroy: function() {

59.         slider.destroy();

60.       }

61.     });

62.   

63.   }

64. });

When plugged in :

PageComboResizer

PageComboResizer is a plugin which uses a comboBox to get desired pageSize value.

01. Ext.namespace('Ext.ux.plugins');

02.   

03. Ext.ux.plugins.PageComboResizer = Ext.extend(Object, {

04.   

05.   pageSizes: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500],

06.   prefixText: 'Showing ',

07.   postfixText: 'records per page.',

08.   

09.   constructor: function(config){

10.     Ext.apply(this, config);

11.     Ext.ux.plugins.PageComboResizer.superclass.constructor.call(this, config);

12.   },

13.   

14.   init : function(pagingToolbar) {

15.     var ps = this.pageSizes;

16.     var combo = new Ext.form.ComboBox({

17.       typeAhead: true,

18.       triggerAction: 'all',

19.       lazyRender:true,

20.       mode: 'local',

21.       width:45,

22.       store: ps,

23.       listeners: {

24.         select: function(c, r, i){

25.           pagingToolbar.pageSize = ps[i];

26.           var rowIndex = 0;

27.           var gp = pagingToolbar.findParentBy (

28.             function (ct, cmp) {return (ct instanceof Ext.grid.GridPanel) ? true : false;}

29.           );

30.           var sm = gp.getSelectionModel();

31.           if (undefined != sm && sm.hasSelection()) {

32.             if (sm instanceof Ext.grid.RowSelectionModel) {

33.               rowIndex = gp.store.indexOf( sm.getSelected() ) ;

34.             } else if (sm instanceof Ext.grid.CellSelectionModel) {

35.               rowIndex = sm.getSelectedCell()[0] ;

36.             }

37.           }

38.           rowIndex += pagingToolbar.cursor;

39.           pagingToolbar.doLoad(Math.floor(rowIndex/pagingToolbar.pageSize)*pagingToolbar.pageSize);

40.         }

41.       }

42.     });

43.   

44.     Ext.iterate(this.pageSizes, function(ps) {

45.       if (ps==pagingToolbar.pageSize) {

46.         combo.setValue (ps);

47.         return;

48.       }

49.     });

50.   

51.     var inputIndex = pagingToolbar.items.indexOf(pagingToolbar.refresh);

52.     pagingToolbar.insert(++inputIndex,'-');

53.     pagingToolbar.insert(++inputIndex, this.prefixText);

54.     pagingToolbar.insert(++inputIndex, combo);

55.     pagingToolbar.insert(++inputIndex, this.postfixText);

56.     pagingToolbar.on({

57.       beforedestroy: function(){

58.         combo.destroy();

59.       }

60.     });

61.   

62.   }

63. });

When plugged in :

PageCycleResizer

PageCycleResizeris a plugin which uses a cycleButton to get desired pageSize value.

view source print ?

01. Ext.namespace('Ext.ux.plugins');

02.   

03. Ext.ux.plugins.PageCycleResizer = Ext.extend(Object, {

04.   

05.   pageSizes: [5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500],

06.   prependText: 'Showing',

07.   appendText: ' records per page',

08.   iconCls: 'icon-app-add-delete',

09.   

10.   constructor: function(config){

11.     Ext.apply(this, config);

12.     Ext.ux.plugins.PageCycleResizer.superclass.constructor.call(this, config);

13.   },

14.   

15.   init : function(pagingToolbar){

16.   

17.     var at = this.appendText; var ic = this.iconCls;

18.     var items=[];

19.     Ext.iterate(this.pageSizes, function(ps) {

20.       items.push({

21.         text: " " + ps + at,

22.         value: ps,

23.         iconCls:ic,

24.         checked: pagingToolbar.pageSize==ps ? true : false

25.       });

26.     });

27.   

28.     var pt = this.prependText;

29.     var button = new Ext.CycleButton({

30.       showText: true,

31.       prependText: pt,

32.       items: items,

33.       listeners: {

34.         change: function(button, item) {

35.           pagingToolbar.pageSize = item.value;

36.           var rowIndex = 0;

37.           var gp = pagingToolbar.findParentBy (

38.             function (ct, cmp) {return (ct instanceof Ext.grid.GridPanel) ? true : false;}

39.           );

40.           var sm = gp.getSelectionModel();

41.           if (undefined != sm && sm.hasSelection()) {

42.             if (sm instanceof Ext.grid.RowSelectionModel) {

43.               rowIndex = gp.store.indexOf( sm.getSelected() ) ;

44.             } else if (sm instanceof Ext.grid.CellSelectionModel) {

45.               rowIndex = sm.getSelectedCell()[0] ;

46.             }

47.           }

48.           rowIndex += pagingToolbar.cursor;

49.           pagingToolbar.doLoad(Math.floor(rowIndex/pagingToolbar.pageSize)*pagingToolbar.pageSize);

50.         }

51.       }

52.     });

53.   

54.     var inputIndex = pagingToolbar.items.indexOf(pagingToolbar.refresh);

55.     pagingToolbar.insert(++inputIndex,'-');

56.     pagingToolbar.insert(++inputIndex, button);

57.     pagingToolbar.on({

58.       beforedestroy: function() {

59.         button.destroy();

60.       }

61.     });

62.   }

63. });

When plugged in :

all PageResizers are PagingToolbar plugins, so in order to use it :

1. bbar: new Ext.PagingToolbar({

2.   pageSize: 15,

3.   store: store,

4.   displayInfo: true,

5.   plugins: [

6.     new Ext.ux.plugins.PageCycleResizer({pageSizes: [5, 10, 15, 20, 30, 50]})

7.   ]

8. })

There is one silent assumption made – initial pageSize parameter is one of the pageSizes elements.
After page size changes a page containing first selected row or cell is displayed. If there is no selection made, a page containing a current top record is displayed.

A zip file with html/js used to create samples above.