`
kangsoft
  • 浏览: 72010 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

GridPanel 分页工具条

EXT 
阅读更多

示例如下:

 

 

/**
 * 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分页工具条通常与EXT的GridPanel或DataView等数据展示组件配合使用。它包含一系列按钮和输入框,如“上一页”、“下一页”、“跳转到第X页”、“每页显示X条”等,用于控制数据的分页显示。EXT内部通过Store对象...

    Ext2.2.GridPanel分页处理+dwrproxy(js对象和json两种数据)

    同时,GridPanel的分页工具栏(PagingToolbar)会自动根据用户的操作更新这些参数,从而实现动态加载数据。 总结一下,本话题介绍了如何在Ext2.2的GridPanel中实现分页处理,利用DWRProxy与后台进行数据交互。无论...

    扩展GridPanel,附带分页选中状态,实现快速构建一个功能齐全的Grid

    分页工具栏可以通过`Ext.create('Ext.toolbar.Paging', {...})`创建,并添加到GridPanel的底部。同时,需要确保数据源(通常是`Ext.data.Store`)支持分页,如设置`proxy`的`reader`和`writer`来处理分页请求。 3. ...

    Ext实现分页查询,前台

    分页工具栏通过`PagingToolbar`创建,设置了每页显示的条数(pageSize),并关联了数据存储(store),以便根据用户操作更新分页状态。 `displayInfo`属性确保显示当前页信息,`beforePageText`和`afterPageText`...

    gridPanel添加按钮

    1. **添加工具栏**: 在`gridPanel`中,我们可以通过配置选项来添加一个工具栏。例如,在ExtJS中,我们可以创建一个新的`Ext.toolbar.Toolbar`实例,并将其附加到`gridPanel`的顶部或底部。 ```javascript var ...

    Extjs中的GridPanel

    GridPanel 可以拥有自定义的工具栏,用于执行各种操作。列也可以有自己的右键菜单,如排序、隐藏列等。 12. **国际化**: GridPanel 的列标题和提示信息可以通过配置进行国际化,方便多语言应用开发。 博客链接 ...

    EXTJS分页全面分析

    #### 一、EXTJS GridPanel分页概述 在EXTJS框架中,`GridPanel`组件是一种常用的数据展示工具,它能够以表格形式呈现数据集。而分页功能是`GridPanel`一个重要的特性,它能够帮助用户更有效地管理大量的数据记录,...

    Extjs分页使用java实现数据库数据查询.docx

    2. **分页工具条Paging Toolbar**: `Ext.PagingToolbar`用于在界面上显示分页控件。配置项包括`pageSize`(每页显示的记录数)、`store`(关联的`Store`对象)、`displayInfo`(是否显示分页信息)以及`displayMsg...

    ExtJs GridPanel 操作

    此外,GridPanel还支持各种工具栏(toolbar)和分页条(paging toolbar),可以添加按钮、下拉框等元素,方便用户操作。例如,添加分页条的代码如下: ```javascript dockedItems: [{ dock: 'bottom', xtype: '...

    Ext-实现带查询以及分页的列表

    在EXTJS框架中,实现一个带查询和分页功能的列表是常见的需求,主要涉及到数据存储(Store)、数据读取(Reader)、网格面板(GridPanel)和分页工具栏(PagingToolbar)。下面将详细解释如何使用EXTJS来实现这一...

    Extjs2.02 Gridpanel

    - **工具栏**:可以添加自定义的工具栏,提供额外的操作按钮。 尽管EXTJS GridPanel功能强大,但也有其局限性,比如在EXTJS 2.02版本中可能不支持列锁定和默认的统计功能,也不直接支持数据导出为Excel或PDF格式。...

    EXT分页视频

    1. **EXT分页组件**:EXT.js提供了GridPanel组件,用于展示数据,其中包含了内置的分页工具条。分页工具条通常位于表格下方,提供“上一页”、“下一页”、页码选择和“每页显示数量”等功能,便于用户控制数据的...

    extjs+php分页例子

    ExtJS提供了强大的分页工具,而PHP则在服务器端处理数据,进行查询和分块返回。 1. **ExtJS分页组件**:ExtJS的GridPanel组件是展示数据的常用方式,它内置了分页功能。通过配置store(数据存储)中的paging参数,...

    Extjs树分页组件扩展

    PagingToolbar是ExtJS中的分页工具栏,通常用于表格组件(GridPanel)的底部,提供页码导航和信息显示。在树分页组件中,同样需要这样一个工具栏来控制分页操作。扩展PagingToolbar,我们需要将它的功能适配到树形...

    无废话ExtJs 系统教程十四[列表:GridPanel]

    例如,通过添加插件可以实现行选择模式(单选或多选)、分页栏(Pagination Toolbar)、工具栏(Toolbar)以添加自定义按钮,甚至编辑功能(Inline或Cell Editing)。另外,GridPanel可以与TreePanel结合,形成一个...

    Ext_Js分页显示案例详解

    2. **PagingToolbar组件**:`Ext.PagingToolbar`是一个用于分页操作的工具栏组件,它可以与Store进行绑定,实现数据的分页加载。 3. **远程分页**:在Ext_Js中,通常采用远程分页的方式,即数据的分页逻辑发生在...

    extjs gridpanel例子和简单应用

    最后创建了一个`GridPanel`实例,指定了其高度、宽度、数据源、标题、列配置和工具栏等属性。 #### 四、总结 通过以上分析可以看出,在ExtJS中利用`GridPanel`展示数据时,需要通过多个对象进行配合来完成数据的...

    Extjs2分页树 带查询功能

    4. **分页工具栏**:创建一个PagingToolbar,设置它的store为我们的分页树存储,并根据需要添加额外的分页按钮和显示信息。 5. **加载和渲染**:将树存储与树面板(TreePanel)关联,配置其根节点,然后根据分页和...

    GridPanel的小难点 第一节 每条数据后面跟随几个操作按钮

    GridPanel是ExtJS库中的一个组件,它用于创建具有可滚动和分页功能的数据网格。在GridPanel中,每一行数据代表一个记录,而我们希望在每行数据后面添加一组操作按钮,以便用户可以对单个记录进行操作。 要实现这个...

Global site tag (gtag.js) - Google Analytics