转载请注明出处,谢谢。
最近在看Ext JS,写了一个使用ExtJS进行分页的程序,后台是jsp代码。
ExtJS 代码:
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //增加列模型
sm,
{header:'编号',dataIndex:'id',sortable:true},
{header:'名称',dataIndex:'name',sortable:true},
{header:'性别',dataIndex:'sex',sortable:true,renderer:function(value){
if(value=='male'){
return " <span style='color:red;font-weight:bold;'>红男 </span> <img src='image/user_male.png'>";
}else{
return " <span style='color:green;font-weight:bold;'>绿女 </span> <img src='image/user_female.png'>";
}
}},
{header:'描述',dataIndex:'descn',sortable:true}
]);
cm.defaultSortable = true;
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'fenye.jsp'}), //后台,数据来源
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
},
[
{name: 'id',mapping:'id'},
{name: 'name',mapping:'name'},
{name:'sex',mapping:'sex'},
{name: 'descn',mapping:'descn'}
]),
remoteSort:true
});
var grid = new Ext.grid.GridPanel({
el: 'grid',
title:'Ext Grid Test',
width:450,
height:410,
trackMouseOver:false,
loadMask: {msg:'正在加载数据,请稍侯……'}, //装在数据时候显示
store:ds,
cm: cm,
sm:sm,
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: ds,
displayInfo: true,
displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',
emptyMsg: "No topics to display"
})
});
grid.render();
ds.load({params:{start:0, limit:15}});
});
后台代码:fenye.jsp
<%
int TOTALCOUNT=100; //共有100条数据
String start = request.getParameter("start");
String limit = request.getParameter("limit");
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
String json = "{totalProperty:"+TOTALCOUNT+",root:[";
String sex = "";
int temp_count=0; //临时存储,后面要用到
if(pageSize+index>TOTALCOUNT)
//最后一页,如果超出总数,则以总数为大
temp_count=TOTALCOUNT;
else
temp_count=pageSize+index;
for (int i = index; i < temp_count; i++) {
if (i % 2 == 0) {
sex = "male";
} else {
sex = "female";
}
json += "{id:" + i + ",name:'" + i + "',sex:'" + sex
+ "',descn:'descn" + i + "'}";
if (i != temp_count - 1) {
json += ",";
}
}
json += "]}";
response.getWriter().write(json);
response.getWriter().close();
//必须将流关闭,才能显示数据,否则数据无法显示
System.out.print(json);
%>
好了,第一个小例子,下一个例子时候,将从数据库中读取数据。
分享到:
相关推荐
在EXT JS框架中,"ext tree 分页"是一种优化技术,用于处理大量数据时避免页面卡顿的问题。在EXT JS的树形组件(TreePanel)中,如果一次性加载所有节点,特别是当树结构非常深或者节点数量巨大时,不仅会消耗大量...
在EXT JS中,分页是一种常见且重要的功能,特别是在数据量较大时,为了提高用户体验,分页能够有效地分批次加载数据,避免一次性加载过多数据导致页面卡顿。EXT JS主要支持XML和JSON两种数据格式来实现分页。下面将...
本示例主要介绍了如何使用Ext.js这个JavaScript框架来实现前端的分页查询功能。 首先,创建一个名为`resource`的数据存储(Store),它负责从服务器获取数据。这里的`Store`对象定义了字段(fields)、数据源URL...
可以直接在本地对数据进行分页显示,很强大!!!!(分页可以是JSON格式 也可以是Array格式)
通过阅读`pageTool.js`源码,我们可以深入了解EXT分页工具条的工作原理,包括事件处理、DOM操作以及数据绑定等细节。 总的来说,EXT分页工具条是EXT框架中的一个重要组成部分,它为Web应用提供了一种高效、直观的...
本示例探讨了如何结合Ext JS(一个强大的JavaScript框架)和Servlet(Java Web开发中的服务器端组件)来实现简单的分页功能。下面将详细解释这个主题。 首先,Ext JS是一个用于构建用户界面的前端JavaScript库,它...
在这个"ext分页客户端demo Java js"的示例中,我们将探讨EXTJS如何实现客户端分页,以及如何与后端(如Java)进行数据交互,而无需在服务器端编写额外的Java代码。 EXTJS中的分页组件主要由Ext.grid.Panel和Ext....
JS的表格分页小工具代码,自己开发遇到需求时候开发的,只有分页功能,EXT表格的迷你版。有问题到:http://blog.csdn.net/ben_gmail/article/details/6585141留言谢谢。
总结来说,"ext grid json分页显示"是通过EXT.js的Grid组件结合DWR的Ajax能力,实现前端数据的分页加载和显示。这种方式既提高了用户界面的响应速度,又有效管理了大数据量的显示,是现代Web应用中常用的数据展示...
EXT4虽然主要关注的是文件系统,但EXT4在这里可能是指EXT JS库的一个版本,EXT JS是一个强大的JavaScript UI框架,用于构建富客户端应用。EXT JS提供了丰富的组件,包括表格(Grid),支持分页功能,便于处理大量...
本篇文章将详细讲解基于Ext JS框架实现前台分页的原理和方法。 首先,理解“前台分页”概念。前台分页指的是在客户端,即用户的浏览器端进行数据的分页处理,而不是在服务器端。这种方式的优点是减少了服务器的负载...
在IT领域,这个标题涉及到的是一个使用EXT JS(一种基于JavaScript的富客户端框架)和JSON(JavaScript Object Notation)数据格式,结合SQL Server数据库实现分页功能的示例。EXT JS允许开发者创建复杂的、交互式的...
7. **部署与运行**:将开发完成的EXT应用程序(包括HTML、JavaScript、CSS文件等)和Servlet部署到服务器上,配置好Web应用容器(如Tomcat),确保URL路径正确,即可正常访问和使用EXT TreeGrid分页功能。...
### 关于Ext TreeGrid分页与可编辑功能的实现 #### 一、背景与目标 在Web应用开发中,特别是涉及到复杂数据展示的应用场景中,`Ext TreeGrid`是一种非常实用且灵活的数据展示组件,它结合了树形结构与表格的形式来...
用EXT来实现下拉框ComboBox 下拉框可以实现分页
在EXT JS这个强大的JavaScript框架中,Store是用于管理和操作数据的核心组件。Store通常与Grid、Tree等组件结合,提供数据的加载、存储和分页功能。这篇博客“Ext中对于多种store数据分页实现示例”将深入探讨EXT JS...
`EXT`是一个流行的JavaScript库,主要用于构建富客户端应用程序,它提供了丰富的组件和功能,包括用于分页的组件。在EXT中设置分页大小是一项关键任务,这关系到用户如何控制和浏览数据。 标题"ext设置分页大小.rar...
2. **分页插件(Paging Toolbar)**:当与数据存储结合使用时,分页工具栏(`Ext.PagingToolbar`)可以在底部显示页码导航,允许用户切换页面。它需要配置`store`属性来引用数据存储,并通过`displayMsg`和`emptyMsg...
Ext.NET是一个强大的JavaScript框架,用于构建富客户端Web应用程序。在这个场景中,我们关注的是"Ext.NET服务器端分页",这是一个优化用户界面性能并提高用户体验的技术。服务器端分页意味着每次只从服务器获取一...