`

第三章-extjs-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

分享到:
评论

相关推荐

    ExtJS 自定义分页控件---- PM3PagingToolbar.js

    显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能. 在 ExtJS3.3基础上开发的. ...

    ExtJs自定义分页控件----PM3PagingToolbar.js

    显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能. 在 ExtJS3.3基础上开发的. ...

    EXTJS3 Ext.PagingToolbar() 快捷键应用

    在EXTJS3中,`Ext.PagingToolbar()` 是一个非常重要的组件,用于在大量数据的网格或视图中实现分页功能。这个组件允许用户轻松地浏览和操作大量的记录,而不需要一次性加载所有数据,从而提高了应用程序的性能和用户...

    extjs 分页是碰到的问题,点击下一页事,查询条件无法传递

    在Extjs中使用`pagingtoolbar`组件进行分页操作时,通常情况下,当我们点击“下一页”,`store`会自动加载数据。但是,默认情况下`store`只传递了`start`和`limit`两个参数,这意味着如果之前进行了某种查询(例如...

    extjs4.2 分页combo动态条数 源码

    3. **PagingToolbar**:创建一个PagingToolbar,并将其与Store关联起来,以便自动处理分页。 ```javascript var pagingToolbar = Ext.create('Ext.toolbar.Paging', { store: store, dock: 'bottom', ...

    Extjs中文教程2.x

    - **下载**: 可以从官方网站或第三方资源网站下载 Extjs 框架。 - **环境部署**: 需要安装 Node.js 和 npm 等工具来搭建开发环境。 - **Spket IDE**: 推荐使用支持 Extjs 的集成开发环境,如 Spket IDE,它提供了...

    ExtJs高级技巧

    #### 三、ExtJs高级PagingToolbar配置 在ExtJs中,`PagingToolbar`组件提供了分页功能,可以方便地对大量数据进行分页显示。下面是一个配置`PagingToolbar`的示例: ```javascript bbar: new Ext.PagingToolbar({ ...

    extjs前台分页插件PagingStore!

    在ExtJS 3.x版本中,PagingStore是与GridPanel结合使用,使得用户可以逐页加载和浏览数据,而无需一次性加载所有记录,从而减轻服务器压力。 PagingStore的工作原理: 1. **连接数据源**:PagingStore通常与远程...

    extjs gridpanel例子和简单应用

    displayMsg: '显示第{0}条到第{1}条记录,一共{2}条', displayInfo: true }); ``` 创建了一个`PagingToolbar`实例,设置了每页显示的记录数和分页信息的显示方式。 7. **创建GridPanel** ```javascript ...

    extjs 分页 下载

    代码片段中的第3行创建了一个名为`ds`的`Store`实例,并配置了代理(`proxy`)和数据读取器(`reader`)。其中: - `proxy`: 使用`HttpProxy`来定义数据源的位置,即服务器的URL。 - `reader`: 定义了如何解析...

    学习ExtJS Panel常用方法

    ### ExtJS Panel 常用方法详解 #### 一、属性介绍 在开始探讨 ExtJS Panel 的常用方法之前,我们先来了解一下与 Panel 相关的一些基本属性。 1. **frame**: - 类型:布尔类型(true 或 false) - 描述:此属性...

    Extjs4 Grid分页与自动刷新

    ### Extjs4 Grid分页与自动刷新 #### 一、Extjs4 Grid 分页功能实现 在使用Extjs4进行Web应用开发时,Grid控件是常用的数据展示组件之一。对于大数据量的情况,通常需要使用分页来提高用户体验。下面详细介绍如何...

    关于EXT分页,分组,排序

    通过调用 `store.load()` 方法来加载数据,其中传入的参数 `{start:0, limit:3}` 表示从第0条数据开始,每次只加载3条数据。 5. **配置 PagingToolbar**: 创建了一个 `PagingToolbar` 组件,并设置了各种属性,...

    Ext Js权威指南(.zip.001

    第3章 调试工具及技巧 / 62 3.1 使用firebug进行调试 / 62 3.2 在ie中调试 / 76 3.2.1 使用debugbar和companion.js调试 / 76 3.2.2 使用ietester测试 / 80 3.2.3 在ie 8或ie 9中调试 / 83 3.3 在chrome中调试...

    extmaxdate3.rar_ext_大数据

    在这个场景中,“extmaxdate3.rar_ext_大数据”可能是一个示例或教程,专注于如何利用ExtJS来处理大数据集,特别是与日期相关的数据。在描述中提到的“Ext上传大数据量,用重要的功能实现大数据量的翻页”,意味着这...

    使用extremecomponent组件实现分页、导出xls

    在Extremecomponents中,通常会使用Store来存储数据,然后通过ExportTask或第三方库如JExcelAPI或Apache POI将Store中的数据转换成Excel文件。导出过程包括:创建一个CSV字符串,或者构建一个Excel工作簿模型,然后...

    Ext解决题目(内存分页+导出Excel)

    一种常见的方式是使用`Ext.util.JSONP`或第三方库如`SheetJS`(又名`xlsx`),将数据转换为CSV或Excel文件格式。用户点击导出按钮时,可以触发一个函数,该函数获取当前表格显示的数据,将其格式化为Excel格式,并...

    ext TreeGrid分页可编辑

    - `Ext TreeGrid`是基于ExtJS框架的一个组件,能够同时显示树形结构和表格数据。 - 它特别适用于需要同时展现层次结构和详细数据的应用场景。 2. **分页实现**: - 在Ext TreeGrid中实现分页功能通常需要使用到...

Global site tag (gtag.js) - Google Analytics