Almost the final version of the paging plugin.

It was necessary to modified the grid to load the store with only one row when the pugin is install.

static/plugin_dbui/lib/appgrid.js

@@ -61,9 +61,6 @@ App.grid.Grid = Ext.extend(Ext.grid.GridPanel, {
 			model: this.model.store,
 			debug: App.debug
 		});
-
-		// load immediately values in the store
-		this.store.load();
 		
 		// the columns model
 		this.columns = this.model.colModel;
@@ -77,6 +74,51 @@ App.grid.Grid = Ext.extend(Ext.grid.GridPanel, {
 		
 		// initialize the underlying class. DON'T MOVE
 		App.grid.Grid.superclass.initComponent.call(this);
+		
+		this.on('beforerender', this.onBeforeRender);
+	},
+	/**
+	 * Handler call before render. It is used to load the store
+	 * 
+	 * NOTE: 
+	 * The way to load the store depends on the presence of the paging plugin.
+	 * In this library the initialisation sequence start with the initComponent
+	 * followed by the initialisation of the plugins followed by the render.
+	 * 
+	 * @param {Object} grid
+	 */
+	onBeforeRender: function(grid){
+		
+		// is the paging plugin ?
+		var isPagingPlugin = false;
+		if( 'plugins' in grid){
+			for (var i = 0; i < grid.plugins.length; i++){
+				if( 'ptype' in grid.plugins[i]){
+					if( grid.plugins[i].ptype == 'pGridPaging'){
+						isPagingPlugin = true;
+						break;
+					} 
+				}
+			}	
+		}
+		
+		// load the store
+		// NOTE: when the paging is in action, need to recuperate the
+		// number of records. It is why we only ask the first one.
+		// When the store will be loaded, the paging plugin will tune
+		// the number of rows per page and will reload the store accordingly.
+		if( isPagingPlugin)
+			grid.store.load({
+				params: {
+					start: 0,
+					limit: 1
+				}
+			});
+			
+		else
+			grid.store.load();
+				
+		return true;
 	}
 });
 

static/plugin_dbui/lib/appgridpaging.js

 /**
  * The paging bottom bar plugin
- *
- * The ptype of this component is pGridPagingBar.
+ * The ptype of this component is pGridPaging.
  *  
  * @version $Id$
  * 
  */
 Ext.namespace('App.grid');
 
-App.grid.PagingBar = Ext.extend(Object, {
+App.grid.Paging = Ext.extend(Object, {
 
+	/**
+	 * Private parameter identifying the type of plugin
+	 */
+	ptype: 'pGridPaging',
+
+	/**
+	 * Plugin intialisation
+	 */
 	init: function(grid){
 
+		grid.pagingInitialized = false;
+		
+		// associate the bbar to the grid store
 		var bbar = grid.getBottomToolbar();
 		bbar.bindStore(grid.store);
-		bbar.pageSize = 10;
-		bbar.doRefresh();
-		
+
+		// add the slider and the export button
 		bbar.add('-', 
-				 'Size', 
+				 'Rows per page', 
 				 {
-				 	xtype: 'numberfield',
-				  	decimalPrecision: 0,
-					listeners: {specialkey: this.onChangePageSize,
+				 	xtype: 'slider',
+					plugins: new Ext.slider.Tip(),
+					listeners: {changecomplete: this.onChangePageSize,
 								scope: bbar},
-				  	minValue: 1,
-				  	value: bbar.pageSize,
-				  	width: 30
+					minValue: 1,
+					width: 100,
 				 }, 
 				 '->',
 				 {
@@ -37,26 +45,59 @@ App.grid.PagingBar = Ext.extend(Object, {
 		);
 		
 		bbar.show();
+		
+		// NOTE: when this plugin is used, the grid load the store
+		// with the first row only. The results contains the total
+		// number of records in the store. We used it to initialized
+		// properly the slider. 
+		grid.store.on('load', this.onStoreLoad, grid);
+		
 	},
+	
 	/**
-	 * Handler
-	 * @param {Object} field
-	 * @param {Object} e
+	 * Handler to change the number of rows per page
 	 */
-	onChangePageSize: function(field, e){
-		if(e.getKey() == e.ENTER){
-			this.pageSize = field.getValue();
-			this.doRefresh();
-		}
+	onChangePageSize: function(slider, newValue, thumb){
+		var bbar = this;
+		bbar.pageSize = newValue;
+		bbar.moveFirst();
 	},
+	
 	/**
-	 * Handler
-	 * @param {Object} button
-	 * @param {Object} e
+	 * Handler to export the grid content as a CSV file
 	 */
-	onExport: function(button ,e){
-		console.log('click, click');
-	}
+	onExport: function(button ,event){
+		Ext.Msg.alert('Warning', 'Functionality not yet implemented');
+	},
+	
+	/**
+	 * Handler to tune the number of rows per page and the number of page
+	 */
+	onStoreLoad: function(store, records, options){
+
+		var grid = this;
+		if(grid.pagingInitialized)
+			return;
+		
+		grid.pagingInitialized = true;
+		
+		var bbar = grid.getBottomToolbar();
+		var slider = bbar.findByType('slider')[0];
+		
+		// NOTE: the number of row which visible in the browser
+		// can be obtained having a look to the DOM tree finding
+		// CSS component name x-grid3-cell-inner. Then by comparing
+		// the innerHeight of the browser window and the height of the
+		// cell we can compute the number of rows ? For later !! 
+		var nRows = 10
+		
+		slider.maxValue = store.totalLength;
+		slider.setValue(nRows);
+		
+		bbar.pageSize = nRows;
+		bbar.moveFirst();
+	},
+	
 });
 
-Ext.preg('pGridPagingBar', App.grid.PagingBar);
+Ext.preg('pGridPaging', App.grid.Paging);