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

ExtJs GridPanel分页

EXT 
阅读更多
数据访问工具
var store = new Ext.data.Store({
		        proxy: new Ext.data.HttpProxy({
		            url: searchNodeFromLuceneDataUrl
		        }),
		        
		        reader:new Ext.data.JsonReader({
		        	totalProperty: 'totalCount',
       				idProperty:'nodeId',
       				root:'data',
       				remoteSort: true,
       				
       				fields: [
		            	'nodeId','nodeName', 'nodeType', 'path'
		       		]
		        })
		    });

刷新数据
function relushDataFunction(start){
				var store = searchRstGridPanel.store;
				store.reload({params:{
					workspaceName:activeWorkspaceName,
					nodeName:Ext.getDom('search_nodeName').value,
					path:Ext.getDom('search_nodePath').value,
					start:start,
					limit:pageSize
				}});
			};


新建gridPanle
var searchRstGridPanel = new Ext.grid.GridPanel ({
				 store: store,
		        trackMouseOver:false,
		        disableSelection:true,
		        loadMask: true,

			    colModel: new Ext.grid.ColumnModel({
			        defaults: {
			            width: 120,
			            sortable: true
			        },
			        columns: [
			        	new Ext.grid.RowNumberer(), // 自动序号
			            {header: '节点名称', dataIndex: 'nodeName'},
			            {header: '路径', dataIndex: 'path'},
			            {header: '节点类型', dataIndex: 'nodeType'},
			            {id: 'nodeId', header: '标识', width: 200, sortable: true, dataIndex: 'nodeId', align:'center'}
			            
			        ],
			        listeners:{'click':function(){alert()}}
			    }),
			    viewConfig: {
			        forceFit: true,
			        getRowClass: function(record, index) {
			           
			        }
			    },
			    
			    bbar: new Ext.PagingToolbar({
			    	store: store,
			    	displayInfo: true,
			        pageSize: pageSize,
			        prependButtons: true,
                    displayMsg : '显示第 {0}条到 {1}条记录,总共 {2}条',   
                    emptyMsg : "没有记录",
                    doLoad:function(start){
                    	relushDataFunction(start); // 调用函数刷新数据
                    	this.cursor = start; // 更新页签
                    }

			    }),
			    anchor:'100%',
			    height:238,
			    frame: true,
			    border:false,
			    iconCls: 'icon-grid'
			    
			});
分享到:
评论

相关推荐

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

    在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...

    ExtJs GridPanel延时加载.rar

    在给定的"ExtJs GridPanel延时加载.rar"文件中,主要涉及的核心概念是ExtJs中的GridPanel组件以及延时加载技术。GridPanel是ExtJs中一个非常重要的组件,它用于展示表格数据,而延时加载则是一种优化大量数据处理的...

    EXTJS分页全面分析

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

    extjs gridpanel例子和简单应用

    ### ExtJS GridPanel 使用详解及示例 #### 一、引言 在现代Web应用程序开发中,特别是基于ExtJS框架的应用程序中,`GridPanel`是处理表格数据展示的一个非常重要的组件。它不仅可以帮助开发者轻松地展示数据,还...

    extjs学习 分页后台处理

    以下是对EXTJS分页后台处理的详细说明: 首先,`Store`对象是EXTJS中用于存储数据的核心组件。在你的代码中,`Store`被创建并配置了`baseParams`、`JsonReader`和`HttpProxy`。 1. `baseParams`: 这个属性用于传递...

    通过Servlet让Extjs GridPanel 显示数据库数据.docx

    ### 通过Servlet让Extjs GridPanel显示数据库数据 在现代Web开发中,将数据库中的数据动态展示在前端界面上是一项常见的需求。本文档主要介绍如何通过Servlet技术配合Extjs框架中的GridPanel组件来实现这一功能。 ...

    Extjs2.02 Gridpanel

    【EXTJS 2.02 GridPanel 知识详解】 EXTJS GridPanel 是EXTJS库中的核心组件之一,尤其在EXTJS 2.02版本中,它提供了强大的表格展示和交互功能,对于初学者来说极具学习价值。GridPanel不仅能够处理基本的表格操作...

    Extjs gridpanel 出现横向滚动条问题的解决方法

    在使用ExtJS开发Web应用程序时,经常会遇到在GridPanel中数据列过多,导致横向滚动条自动出现的问题。这个问题主要是由于GridPanel的宽度不足以容纳所有的列宽,因此浏览器会自动显示横向滚动条以便用户查看全部数据...

    Extjs树分页组件扩展

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

    ExtJs GridPanel 操作

    ExtJS GridPanel是Sencha ExtJS框架中的一个核心组件,用于创建数据网格,展示大量结构化数据。在本文中,我们将深入探讨GridPanel的操作,包括其功能、配置选项以及如何扩展GridPanel以满足复杂需求。 首先,...

    extjs前台分页插件PagingStore!

    ExtJS的PagingStore是其框架中用于实现前端分页功能的重要组件,主要适用于处理大量数据的场景,以提高网页性能并提供良好的用户体验。在ExtJS 3.x版本中,PagingStore是与GridPanel结合使用,使得用户可以逐页加载...

    Extjs2分页树 带查询功能

    在传统的表格组件(GridPanel)中,分页通常是通过Store对象和PagingToolbar组件实现的。Store负责从服务器获取数据并管理缓存,而PagingToolbar则提供用户界面,让用户可以翻页。在树形组件中,虽然没有内置的分页...

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

    在本文中,我们将探讨如何使用ExtJS框架结合Java实现数据库数据的分页查询。ExtJS是一个强大的JavaScript库,常用于构建桌面级的Web应用程序,而Java则是一种广泛使用的后端开发语言,常用于处理服务器端逻辑。在这...

    ExtJS 表格面板GridPanel完整例子

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

    gridPanel添加按钮

    `gridPanel`在诸如ExtJS、GWT或PrimeFaces等框架中常见,它们提供了丰富的功能来处理表格数据,包括排序、筛选、分页等。 首先,让我们了解`gridPanel`的基本结构。`gridPanel`由多个部分组成,如头部(header)、...

    extjs+php分页例子

    1. **ExtJS分页组件**:ExtJS的GridPanel组件是展示数据的常用方式,它内置了分页功能。通过配置store(数据存储)中的paging参数,可以启用分页。例如,设置`paging: true`开启分页,然后通过`proxy`配置项连接到...

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

    非传统分页工具. 简单说明下: 显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能....

    ExtJS介绍以及GridPanel

    在本文中,我们将深入探讨ExtJS的核心特性,特别是其GridPanel组件。 首先,ExtJS的核心特性之一是组件化。它将网页元素抽象为可复用的组件,如按钮、表格、窗口等,每个组件都有自己的属性、方法和事件,可以方便...

    Extjs入门教程(treePanel和GridPanel)

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

    Extjs中的GridPanel

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

Global site tag (gtag.js) - Google Analytics