`

extjs 改变gridPanel 底部分页栏方框的大小及一页可显示的分页数方法

 
阅读更多
改变gridPanel底部分页栏方框的大小在创建的分页工具条加inputItemWidth

   var pagingbar = Ext.create('Ext.toolbar.Paging',{
        store: unitInfoGridStore,//必须得跟上面的的store来源一样
         itemId: 'pagingbar',
        displayInfo: true,
        pageSize: 10,
        dock: 'bottom',
        displayMsg:'显示第{0}条到{1}条,一共{2}条',
        firstText: '首页',
        nextText: '下一页',
        prevText: '上一页',
        lastText: '最后一页',
        refreshText: '刷新',
        inputItemWidth: 50,//这里是改变gridPanel底部分页栏方框的大小        
        items:['-','每页',pagesizeCombo(),'条'], 
       // plugins : [new Ext.ux.PageSizePlugin()],
        emptyMsg:'没有需要显示的记录' 
        
	});

//实现一页可以有选择的显示记录数
var pagesizeCombo = function(){
		return new Ext.form.ComboBox({  
		        store: new Ext.data.SimpleStore({
		            fields: ['id', 'value'],
		            data: [['10', 10], ['20', 20], ['30', 30], ['50', 50],['100',100]]
		        }),
		        mode: 'local',
		        displayField: 'id',
		        valueField: 'value',
		        editable: false,
		        allowBlank: false,
		        triggerAction: 'all',
		        width: 60,
		        listeners:{ 
		               render: function(comboBox){
		                        comboBox.setValue(comboBox.ownerCt.pageSize);   //使得下拉菜单的默认值是初始值
		
		                      }, 
		               select: function(comboBox){
		                  var pSize = comboBox.getValue();
		                   comboBox.ownerCt.getStore().pageSize = parseInt(pSize); //改变PagingToolbar的pageSize 值
		                             
		
		 }
		        }
		    });  
		}

分享到:
评论

相关推荐

    给Extjs的GridPanel增加“合计”行

    在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加‘合计’行”将指导我们如何实现这一功能。 首先,我们需要...

    ExtJS的GridPanel导出excel文件

    ExtJS的GridPanel导出excel文件,方便快捷易懂!

    ExtJs GridPanel双击事件获得双击的行

    以上就是关于ExtJs GridPanel双击事件获取双击的行及选中复选框状态的实现方法。通过这些知识,你可以轻松地在GridPanel中添加用户交互功能,提升应用程序的用户体验。请确保在实际项目中根据需求调整代码,以满足...

    EXTJS_GridPanel_ColumnModel_列的宽度随数据变化而变化

    EXTJS的GridPanel是其组件库中的核心组件之一,用于展示数据网格,广泛应用于Web应用的数据展示。在EXTJS中,ColumnModel是用来定义GridPanel列结构和行为的关键部分。这篇博客"EXTJS_GridPanel_ColumnModel_列的...

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

    分页组件在EXTJS中通常由PagingToolbar提供,这是一个放置在Grid或TreePanel底部的工具栏,包含了导航按钮和页码显示。在Combobox中实现分页,我们需要自定义Combobox的行为,使其能够与PagingToolbar协同工作。 `...

    Extjs2.02 Gridpanel

    EXTJS GridPanel 是EXTJS库中的核心组件之一,尤其在EXTJS 2.02版本中,它提供了强大的表格展示和交互功能,对于初学者来说极具学习价值。GridPanel不仅能够处理基本的表格操作,如单选、多选、排序、改变列宽等,还...

    Extjs让Gridpanel组件自动滚屏

    后来公司让改变一个Gridpanel的展现方式,要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久,也没有找到框架的相应控制方法,然后在网上找了很久,也没有找到有人给去示例,无奈就只能自己写JS来控制...

    extjs 分页

    3. Paging Toolbar:分页条是EXTJS提供的一种UI组件,它包含页码按钮、跳转输入框、每页记录数下拉框等,方便用户进行分页操作。 二、EXTJS分页实现 1. 配置Store:首先,我们需要在Store中配置分页参数,如设置每...

    ExtJs GridPanel延时加载.rar

    ExtJs是一款功能强大的JavaScript库,主要用于构建富客户端的Web应用程序。在给定的"ExtJs GridPanel延时加载.rar"文件中,主要涉及的核心概念是ExtJs中的GridPanel组件以及延时加载技术。GridPanel是ExtJs中一个...

    Extjs入门教程(treePanel和GridPanel)

    GridPanel则是ExtJS中的表格视图组件,它可以展示大量的数据,并提供排序、筛选、分页等功能。在集成TreePanel和GridPanel时,可能涉及到的概念有:将TreePanel的节点与GridPanel的数据关联,实现点击树节点时动态...

    EXTJS.GRIDPANEL 日期格式

    在深入探讨ExtJS.GridPanel中的日期格式设置之前,我们首先简要回顾一下ExtJS是什么以及GridPanel组件的基本功能。ExtJS是一个用JavaScript编写的开源框架,用于构建交互式的Web应用程序,它提供了丰富的UI组件和...

    ExtJS 表格面板GridPanel完整例子

    ExtJS表格面板(GridPanel)是Sencha Ext JS框架中的一个核心组件,它用于展示大量结构化数据。在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们...

    ExtJS介绍以及GridPanel

    ExtJS是一种基于JavaScript的开源富客户端框架,由Sencha公司开发和维护,主要用于构建桌面级的Web应用程序。它提供了一套完整的组件模型、数据绑定、布局管理、事件处理机制,使得开发者可以创建出功能强大、交互...

    extjs 简单分页例子

    EXTJS通过其Grid组件支持分页,Grid组件是一个可配置的表格视图,能够显示大量数据并进行排序、筛选和分页操作。 首先,我们需要创建一个EXTJS Grid组件。在JS文件中,定义Grid的基本配置,包括列模型(column ...

    extjs 树型分页组件

    在分页场景下,服务器返回的数据应包含分页信息,如总记录数、每页大小等。EXTJS的`TreeStore`会自动处理这些信息,以便正确地显示和导航页面。 4. 扩展树节点 当用户点击或展开树节点时,EXTJS会发送请求到服务器...

    Extjs中的GridPanel

    GridPanel 是 ExtJS 中的核心组件之一,它提供了一种高效、可定制的方式来展示大量结构化数据。在这个主题中,我们将深入探讨 GridPanel 的关键特性和使用方法。 1. **GridPanel 基本结构**: GridPanel 包含了行...

    汇总Extjs中GridPanel的各个属性与方法.doc.docx

    其中,GridPanel 是一个核心组件,用于展示数据网格,它提供了丰富的功能,如数据分页、排序、选择等。下面将详细阐述`GridPanel`中的关键属性和方法。 1. **store**: GridPanel 的数据源是通过 `store` 配置项...

    extjs+php分页例子

    6. **自定义分页栏**:如果需要自定义分页栏的样式或行为,可以创建一个Ext.toolbar.Paging实例,并添加到GridPanel的底部。通过监听`beforechange`或`changepage`事件,可以实现额外的功能,比如在切换页面前进行...

    Extjs grid分页1

    ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...

    SSH+ExtJs分页小例子

    `findPageAll`方法实现了分页查询的功能,它接收两个参数,`start`表示当前页的起始位置,`limit`表示每页显示的记录数。方法内部通过Hibernate的`executeFind`方法,执行了一个HQL(Hibernate Query Language)查询...

Global site tag (gtag.js) - Google Analytics