PagingToolbar
本章任务
1.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 } }) });
本章目标
1. 理解PagingToolbar