제3장 - extjs-PagingToolbar

/**
 *  
 */

Ext.onReady(function() {

			var _sm = new Ext.grid.CheckboxSelectionModel({
						header : '',
						dataIndex : 'userName'
					});

			/**
			 *  
			 */
			var _cm = new Ext.grid.ColumnModel({
						columns : [new Ext.grid.RowNumberer(), _sm, {
									header : ' ',
									dataIndex : 'userName'
								}, {
									header : " ",
									renderer:_renderer,// 
									dataIndex : 'userPass'
								}]
					});
			
			/**
			 *  
			 */
			function _renderer(value){
				if(value.search("^[0-9]+$")==-1){
					return "<span style=\"color:red;font-weight:bold\">"+value+"</span>"
				}else{
				   return "<span style=\"color:green;font-weight:bold\">"+value+"</span>"
				}
			}
			/**
			 *  
			 */
			var _fields = new Ext.data.Record.create([{
						name : 'userName',
						type : 'string'
					}, {
						name : 'userPass',
						type : 'string'
					}]);
			/**
			 *  
			 */
			var _store = new Ext.data.JsonStore({
						url : './ch03.jsp',
						root : 'users',
						totalProperty:'totalRecords',
						fields : _fields
					});

			/**
			 *  
			 */
			var _bbar = new Ext.PagingToolbar({
						store : _store,
						pageSize : 3,
						displayInfo : true,
						displayMsg : ' {0} {1} ， {2} ',
						emptyMsg : ' '

					});

			/**
			 *  
			 */
			var _grid = new Ext.grid.GridPanel({

				width : 800,//  
				height : 300,//  
				renderTo : Ext.getBody(),
				bbar : _bbar,
				cm : _cm,//  
				refresh:function(){
				this.store.reload();
				},
				store : _store
					//  
				});

			/**
			 *  
			 * 
			 */
			_store.load({
						params : {
							start : 0,
							limit : 3
						}
					})
		});