第三章-extjs-PagingToolbar

最新推荐文章于 2023-06-17 23:03:49 发布

原创最新推荐文章于 2023-06-17 23:03:49 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extJs #extJs基础 #extJs面向对象 #extjs oop #oop

FY_Extjs_sir 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用ExtJS框架实现一个包含分页工具栏的网格面板。该示例通过CheckboxSelectionModel进行选择控制，并自定义了密码列的显示样式。数据通过JsonStore从服务器加载，并使用PagingToolbar进行分页显示。

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