<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<SCRIPT>
Ext.onReady(function(){
//自定义列,可以更改显示内容，比如 常用到的 0：男 1：女
function check(value)
{
if (value=='195154')
{
return '<span style="color:red;font-weight:bold;">内容已更改</span>';
}
else
{
return value;
}
}
//跨域读取数据使用 ScriptTagProxy url=http://extjs.com/forum/topics-remote.php
//可以直接访问 http://extjs.com/forum/topics-remote.php 查看json 数据形式
var store = new Ext.data.Store({
proxy : new Ext.data.ScriptTagProxy({url:'http://extjs.com/forum/topics-remote.php'}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'post_id'
},[
'post_id','topic_title','author'
])
});
store.load({params:{start:0, limit:10}});
//定义勾选框，不需要可不必定义
var sm = new Ext.grid.CheckboxSelectionModel();
//定义列
var colM=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//增加自动编号，不需要可不必定义
sm,//勾选框，不需要可不必定义
{header:'列1',dataIndex:'post_id',width:170,sortable:true,renderer:check},
// 生成列，sortable为列排序，不需要设置为false，默认false，renderer为该列增加自定义函数
{header:'列2',dataIndex:'topic_title',width:170,sortable:true},
{header:'列3',dataIndex:'author',width:170}
]);
//生成表格
var grid = new Ext.grid.GridPanel({
renderTo:'show',
title:"表格",
height:400,
width:600,
trackMouseOver:false,
loadMask: {msg:'正在加载数据，请稍侯……'},
cm:colM,
sm:sm,
store:store,
viewConfig: {
forceFit:true
},
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '第{0} 到 {1} 条数据 共{2}条',
emptyMsg: "没有数据"
})
});
});
</SCRIPT>
<DIV id=show></DIV>
</body>
</html>
这个例子,可以参考!!
分享到：
相关推荐
EXTJS分页通常与数据访问对象（DAO）和动作控制器（Action）结合使用，形成一个完整的数据获取和展示流程。下面将详细阐述EXTJS分页的核心概念、实现方法以及DAO和Action在其中的作用。 一、EXTJS分页核心概念 1. ...
### Extjs分页遇到的问题：点击下一页时查询条件无法传递 在开发基于Extjs的应用程序时，分页是一项常用且重要...通过以上步骤，可以有效地解决Extjs分页时查询条件无法传递的问题，确保用户能够获得准确的数据结果。
在这个"SSH+ExtJs分页小例子"中，我们将探讨如何将这两种技术结合实现数据分页显示。 首先，我们来看NewsDAO.java文件。这个文件包含了两个关键方法：`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...
总结来说，实现ExtJS分页查询的关键在于前端和后端的协同工作。前端通过Store、Proxy和Paging Toolbar处理用户交互，后端通过Servlet接收请求，执行数据库操作，并返回符合约定的数据格式。通过这种方式，可以有效地...
总结来说，ExtJS分页是通过前端和后端的协同工作实现的，前端通过ExtJS的Grid和Store组件呈现和管理分页数据，而后端则使用如Spring MVC和SQL Server 2008这样的技术处理分页查询。理解并熟练掌握这些技术对于构建...
### EXTJS分页全面分析 在本篇内容中，我们将深入了解EXTJS中`GridPanel`分页技术的具体实现方法，并通过实例代码详细解析其工作原理和技术要点。 #### 一、EXTJS GridPanel分页概述 在EXTJS框架中，`GridPanel`...
### Struts2+Json+ExtJS分页技术详解 #### 一、技术背景与概述 在Web开发领域，实现高效的数据展示与交互是至关重要的。本文档将介绍如何使用Struts2框架结合JSON数据格式以及ExtJS前端库来实现动态分页功能。此...
至于"ExtJs分页"，开发者通常会在后台提供一个能接受页码和每页大小参数的接口，然后在前端Grid组件中配置分页插件，通过AJAX请求获取数据并更新页面。 总之，Spring MVC、MyBatis、Ehcache和ExtJS的组合为构建高...
以下是对EXTJS分页后台处理的详细说明： 首先，`Store`对象是EXTJS中用于存储数据的核心组件。在你的代码中，`Store`被创建并配置了`baseParams`、`JsonReader`和`HttpProxy`。 1. `baseParams`: 这个属性用于传递...
在标题和描述中提到的“ExtJS分页功能”，我们将深入探讨如何在ExtJS中实现分页，特别是通过使用MemoryProxy进行本地分页。 首先，我们需要了解分页的基础知识。分页通常包括以下几个组件： 1. 数据存储（Store）...
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
EXTJS是一种基于JavaScript的前端框架，它提供...这是一个基本的EXTJS分页实现，实际应用中可能还需要考虑错误处理、数据过滤、排序等功能。通过这种方式，EXTJS能够帮助开发者高效地构建功能丰富的数据驱动的Web应用。
综上所述，本示例展示了一个典型的ExtJS分页功能实现，包括前后端数据传递与分页控制流程。ExtJS的组件化特性使得复杂的前端功能变得简单易用，配合Servlet和JSP技术，形成了一个完整的前后端数据交互与展示的解决...
3. **数据加载**：EXTJS分页通常与服务器端的数据接口配合工作，我们需要实现类似的功能，比如使用Ajax请求加载不同页的数据。 4. **自适应性**：EXTJS的组件通常对各种屏幕尺寸都有很好的适应性，我们的JavaScript...
为了解决这个问题，EXTJS提供了一个名为“树型分页”（Tree Paging）的特性。本文将深入探讨EXTJS树型分页组件的工作原理、实现方法及其实用价值。 1. 树型分页原理 树型分页不同于传统的表格分页，因为它需要处理...
本篇将深入探讨ExtJS中的"Chekboxtree"（复选框树）与"PagingTreeLoader"（分页树加载器）这两个特性，以及如何结合它们实现多选和分页功能。 "Chekboxtree"是ExtJS中的一种特殊树形组件，它允许用户通过复选框选择...
1. **ExtJS分页组件**：ExtJS的GridPanel组件是展示数据的常用方式，它内置了分页功能。通过配置store（数据存储）中的paging参数，可以启用分页。例如，设置`paging: true`开启分页，然后通过`proxy`配置项连接到...
在这个场景中，我们关注的是在EXTJS的Combobox（下拉框）组件中实现分页和动态加载数据的功能。Combobox通常用于展示有限数量的选项，但在大数据集的情况下，一次性加载所有数据可能导致页面性能下降。因此，引入...
EXTJS分页主要通过其Grid组件来实现，Grid组件可以展示大量的数据，并且支持动态加载和分页操作。在EXTJS中，我们通常会创建一个Store对象来管理数据源，Store与远程数据源（如Struts2 Action）进行交互，通过Ajax...
在本篇ExtJs学习资料中，我们探讨了如何从服务器获取JSON数据并进行分页处理。这是一项在Web应用程序中非常常见的任务，特别是在构建数据密集型界面时。下面我们将详细阐述实现这一功能的关键步骤和涉及的技术点。 ...