示例如下:
/**
* GridPanel 使用
* 创建可控制分页条数的分页工具条 如:{bbar : getPagingToolbar(grid, store ,20)}
*
* @param {}
* grid
* @param {}
* gridStore
* @param {}
* gridPageSize
* @return {}
*/
function createPagingToolbar(grid, gridStore, gridPageSize) {
var pageToolbar = new Ext.PagingToolbar({
pageSize : gridPageSize,
store : gridStore,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg : "没有记录",
items : [' 每页', new Ext.form.ComboBox({
width : 50,
store : new Ext.data.SimpleStore({
fields : ['val'],
data : [[10], [15], [20], [30], [40],
[50], [60], [70], [80], [100]]
}),
displayField : 'val',
valueField : 'val',
// typeAhead : true,
mode : 'local',
value : gridPageSize,
listWidth : 50,
/** 行宽 * */
triggerAction : 'all',
selectOnFocus : true,
listeners : {
change : {
fn : function(box, newValue, oldValue) {
var pattern = /^[1-9]\d*$/;
if (newValue
&& pattern.test(newValue
.toString())) {
if (parseInt(newValue.toString()) != pageToolbar.pageSize) {
pageToolbar.pageSize = parseInt(newValue);
gridStore.load({
params : {
start : 0,
limit : pageToolbar.pageSize
}
});
return ;
}
}
box.setValue(oldValue);
}
}
}
}), '条']
});
return pageToolbar;
}
- 大小: 3 KB
分享到:
相关推荐
EXT分页工具条通常与EXT的GridPanel或DataView等数据展示组件配合使用。它包含一系列按钮和输入框,如“上一页”、“下一页”、“跳转到第X页”、“每页显示X条”等,用于控制数据的分页显示。EXT内部通过Store对象...
同时,GridPanel的分页工具栏(PagingToolbar)会自动根据用户的操作更新这些参数,从而实现动态加载数据。 总结一下,本话题介绍了如何在Ext2.2的GridPanel中实现分页处理,利用DWRProxy与后台进行数据交互。无论...
分页工具栏可以通过`Ext.create('Ext.toolbar.Paging', {...})`创建,并添加到GridPanel的底部。同时,需要确保数据源(通常是`Ext.data.Store`)支持分页,如设置`proxy`的`reader`和`writer`来处理分页请求。 3. ...
分页工具栏通过`PagingToolbar`创建,设置了每页显示的条数(pageSize),并关联了数据存储(store),以便根据用户操作更新分页状态。 `displayInfo`属性确保显示当前页信息,`beforePageText`和`afterPageText`...
1. **添加工具栏**: 在`gridPanel`中,我们可以通过配置选项来添加一个工具栏。例如,在ExtJS中,我们可以创建一个新的`Ext.toolbar.Toolbar`实例,并将其附加到`gridPanel`的顶部或底部。 ```javascript var ...
GridPanel 可以拥有自定义的工具栏,用于执行各种操作。列也可以有自己的右键菜单,如排序、隐藏列等。 12. **国际化**: GridPanel 的列标题和提示信息可以通过配置进行国际化,方便多语言应用开发。 博客链接 ...
#### 一、EXTJS GridPanel分页概述 在EXTJS框架中,`GridPanel`组件是一种常用的数据展示工具,它能够以表格形式呈现数据集。而分页功能是`GridPanel`一个重要的特性,它能够帮助用户更有效地管理大量的数据记录,...
2. **分页工具条Paging Toolbar**: `Ext.PagingToolbar`用于在界面上显示分页控件。配置项包括`pageSize`(每页显示的记录数)、`store`(关联的`Store`对象)、`displayInfo`(是否显示分页信息)以及`displayMsg...
此外,GridPanel还支持各种工具栏(toolbar)和分页条(paging toolbar),可以添加按钮、下拉框等元素,方便用户操作。例如,添加分页条的代码如下: ```javascript dockedItems: [{ dock: 'bottom', xtype: '...
在EXTJS框架中,实现一个带查询和分页功能的列表是常见的需求,主要涉及到数据存储(Store)、数据读取(Reader)、网格面板(GridPanel)和分页工具栏(PagingToolbar)。下面将详细解释如何使用EXTJS来实现这一...
- **工具栏**:可以添加自定义的工具栏,提供额外的操作按钮。 尽管EXTJS GridPanel功能强大,但也有其局限性,比如在EXTJS 2.02版本中可能不支持列锁定和默认的统计功能,也不直接支持数据导出为Excel或PDF格式。...
1. **EXT分页组件**:EXT.js提供了GridPanel组件,用于展示数据,其中包含了内置的分页工具条。分页工具条通常位于表格下方,提供“上一页”、“下一页”、页码选择和“每页显示数量”等功能,便于用户控制数据的...
ExtJS提供了强大的分页工具,而PHP则在服务器端处理数据,进行查询和分块返回。 1. **ExtJS分页组件**:ExtJS的GridPanel组件是展示数据的常用方式,它内置了分页功能。通过配置store(数据存储)中的paging参数,...
PagingToolbar是ExtJS中的分页工具栏,通常用于表格组件(GridPanel)的底部,提供页码导航和信息显示。在树分页组件中,同样需要这样一个工具栏来控制分页操作。扩展PagingToolbar,我们需要将它的功能适配到树形...
例如,通过添加插件可以实现行选择模式(单选或多选)、分页栏(Pagination Toolbar)、工具栏(Toolbar)以添加自定义按钮,甚至编辑功能(Inline或Cell Editing)。另外,GridPanel可以与TreePanel结合,形成一个...
2. **PagingToolbar组件**:`Ext.PagingToolbar`是一个用于分页操作的工具栏组件,它可以与Store进行绑定,实现数据的分页加载。 3. **远程分页**:在Ext_Js中,通常采用远程分页的方式,即数据的分页逻辑发生在...
最后创建了一个`GridPanel`实例,指定了其高度、宽度、数据源、标题、列配置和工具栏等属性。 #### 四、总结 通过以上分析可以看出,在ExtJS中利用`GridPanel`展示数据时,需要通过多个对象进行配合来完成数据的...
4. **分页工具栏**:创建一个PagingToolbar,设置它的store为我们的分页树存储,并根据需要添加额外的分页按钮和显示信息。 5. **加载和渲染**:将树存储与树面板(TreePanel)关联,配置其根节点,然后根据分页和...
GridPanel是ExtJS库中的一个组件,它用于创建具有可滚动和分页功能的数据网格。在GridPanel中,每一行数据代表一个记录,而我们希望在每行数据后面添加一组操作按钮,以便用户可以对单个记录进行操作。 要实现这个...