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
分享到:
相关推荐
显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能. 在 ExtJS3.3基础上开发的. ...
显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能. 在 ExtJS3.3基础上开发的. ...
在EXTJS3中,`Ext.PagingToolbar()` 是一个非常重要的组件,用于在大量数据的网格或视图中实现分页功能。这个组件允许用户轻松地浏览和操作大量的记录,而不需要一次性加载所有数据,从而提高了应用程序的性能和用户...
在Extjs中使用`pagingtoolbar`组件进行分页操作时,通常情况下,当我们点击“下一页”,`store`会自动加载数据。但是,默认情况下`store`只传递了`start`和`limit`两个参数,这意味着如果之前进行了某种查询(例如...
3. **PagingToolbar**:创建一个PagingToolbar,并将其与Store关联起来,以便自动处理分页。 ```javascript var pagingToolbar = Ext.create('Ext.toolbar.Paging', { store: store, dock: 'bottom', ...
- **下载**: 可以从官方网站或第三方资源网站下载 Extjs 框架。 - **环境部署**: 需要安装 Node.js 和 npm 等工具来搭建开发环境。 - **Spket IDE**: 推荐使用支持 Extjs 的集成开发环境,如 Spket IDE,它提供了...
#### 三、ExtJs高级PagingToolbar配置 在ExtJs中,`PagingToolbar`组件提供了分页功能,可以方便地对大量数据进行分页显示。下面是一个配置`PagingToolbar`的示例: ```javascript bbar: new Ext.PagingToolbar({ ...
在ExtJS 3.x版本中,PagingStore是与GridPanel结合使用,使得用户可以逐页加载和浏览数据,而无需一次性加载所有记录,从而减轻服务器压力。 PagingStore的工作原理: 1. **连接数据源**:PagingStore通常与远程...
displayMsg: '显示第{0}条到第{1}条记录,一共{2}条', displayInfo: true }); ``` 创建了一个`PagingToolbar`实例,设置了每页显示的记录数和分页信息的显示方式。 7. **创建GridPanel** ```javascript ...
代码片段中的第3行创建了一个名为`ds`的`Store`实例,并配置了代理(`proxy`)和数据读取器(`reader`)。其中: - `proxy`: 使用`HttpProxy`来定义数据源的位置,即服务器的URL。 - `reader`: 定义了如何解析...
### ExtJS Panel 常用方法详解 #### 一、属性介绍 在开始探讨 ExtJS Panel 的常用方法之前,我们先来了解一下与 Panel 相关的一些基本属性。 1. **frame**: - 类型:布尔类型(true 或 false) - 描述:此属性...
### Extjs4 Grid分页与自动刷新 #### 一、Extjs4 Grid 分页功能实现 在使用Extjs4进行Web应用开发时,Grid控件是常用的数据展示组件之一。对于大数据量的情况,通常需要使用分页来提高用户体验。下面详细介绍如何...
通过调用 `store.load()` 方法来加载数据,其中传入的参数 `{start:0, limit:3}` 表示从第0条数据开始,每次只加载3条数据。 5. **配置 PagingToolbar**: 创建了一个 `PagingToolbar` 组件,并设置了各种属性,...
第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_大数据”可能是一个示例或教程,专注于如何利用ExtJS来处理大数据集,特别是与日期相关的数据。在描述中提到的“Ext上传大数据量,用重要的功能实现大数据量的翻页”,意味着这...
在Extremecomponents中,通常会使用Store来存储数据,然后通过ExportTask或第三方库如JExcelAPI或Apache POI将Store中的数据转换成Excel文件。导出过程包括:创建一个CSV字符串,或者构建一个Excel工作簿模型,然后...
一种常见的方式是使用`Ext.util.JSONP`或第三方库如`SheetJS`(又名`xlsx`),将数据转换为CSV或Excel文件格式。用户点击导出按钮时,可以触发一个函数,该函数获取当前表格显示的数据,将其格式化为Excel格式,并...
- `Ext TreeGrid`是基于ExtJS框架的一个组件,能够同时显示树形结构和表格数据。 - 它特别适用于需要同时展现层次结构和详细数据的应用场景。 2. **分页实现**: - 在Ext TreeGrid中实现分页功能通常需要使用到...