Extjs 分页技术详细介绍和baseParams属性介绍
分页原理：
1.Extjs分页是根据store.load({params:{start:0,limit:10}}); 中start，limit这两个参数来进行分页的。
(1).当store第一次load的时候，start=0，limit=10；
(2).当点击翻页按钮时，store进行load，此时 start=start+pageSize。
2.为了分页Json字符串中要加上totalProperty来表示记录的总条数。
如：totalProperty:'total'
3.后台的返回json中必须包含有totalProperty属性的字段。
如：string json = "{'total':"+count+",'root':[{}，{}]";
baseParams与Store.load({params:{}})的区别：
(1).baseParams里的参数是一直存在的，
(2).params里的参数，只有load时才会传递过去，当调用reload时参数就不存在了
一.分页语句：
new Ext.PagingToolbar({
pageSize: pageSize,
store: store,
displayInfo: true,
displayMsg: '当前显示 {0} - {1} ，共{2}条记录',
emptyMsg: "没有数据",
items: ['-']
})
二.注意事项：
1.分页中用到的store必须加上“totalCount”属性！！！
2.store加载时也需要给定start和limit两个参数来进行分页查询
3.重新加载时：
(1).若用reload，可不用再设置分页的start和limit参数；
(2).若还是用load，则还是要继续设置该参数；
三.实例分析：
1.Store：
/*-----1.创建数据源------*/
var newsStore = new Ext.data.JsonStore({
url:"getNews.ftl?doType=getNews",
root:"data",
totalProperty:'totalCount',
fields: ["id","title","type","creator",{ name: 'createDate', type: 'date', dateformat: 'Y-m-d'},"ishot"]
});
2.ColumnModel：
/*-----3.创建ColumnModel------*/
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel({
columns:[
sm,
{
header:"编号",
dataIndex:"id",
hidden:true
},{
header:"新闻标题",
dataIndex:"title",
width:500
},{
header:"新闻类型",
dataIndex:"type",
width:120,
renderer:function(v){
if(v == 1){
return "通知公告"
}
else {
return "企业动态";
}
}
},{
header:"是否热点新闻",
dataIndex:"ishot",
width:140,
renderer:function(v){
if(v == 1){
return "<span style=\"color:#ff44aa;font-weight: bold;\">热点新闻</span>"
}
else {
return "普通新闻";
}
}
},{
header:"创建者",
dataIndex:"creator",
width:140
},{
header:"创建时间",
dataIndex:"createDate",
width:140,
renderer : Ext.util.Format.dateRenderer('Y-m-d')
}
]
});
3.GridPanel：
var newsGrid = new Ext.grid.GridPanel({
title:"新闻管理",
store:newsStore,
cm:cm,
sm:sm,
view:newsView,
loadMask:{msg:"正在加载数据，请稍后......"},
height:80,
tbar:[
{
text:"增加新闻",
iconCls: 'add',
handler:function(){
location.href = "addNews.jsp";
}
},{
text:"编辑新闻",
iconCls:"edit",
handler:showUpdateWin
},{
text:"删除新闻",
iconCls:"remove",
handler:removeNews
},{
text:"发布新闻",
iconCls:"audit",
handler:removeNews
},{
text:"预览新闻",
iconCls: 'view',
handler:viewNews
},"-",{
id:"byTitle",
xtype:"label",
text:"标题："
},{
id:"paras",
xtype:"textfield",
enableKeyEvent:true,
listeners:{
"specialKey":function(f,e){
if(e.getKey() == e.ENTER){
var paras = Ext.getCmp("paras").getValue();
var type = Ext.getCmp("byType").getValue();
newsStore.baseParams.pParas = paras;
newsStore.baseParams.pType = type;
newsStore.reload();
//newsStore.load({params:{start:0,limit:pageSize}});
}
}
}
},"-",{
xtype:"label",
text:"类型："
},{
id:"byType",
xtype:"combo",
value:'',
width:90,
mode : 'local',
triggerAction :'all',
forceSelection:true,
store : new Ext.data.SimpleStore({
fields : ["id", "name"],
data : [
['', '全部'],
['0', '企业动态'],
['1', '通知公告']
]
}),
valueField : "id",
displayField : "name",
readOnly: true
},"-",{
text: '搜索',
iconCls: 'filter',
listeners:{
"click":function(){
var paras = Ext.getCmp("paras").getValue();
var type = Ext.getCmp("byType").getValue();
newsStore.baseParams.pParas = paras;
newsStore.baseParams.pType = type;
newsStore.reload();
//newsStore.load({params:{start:0,limit:pageSize}});
}
}
}
],
bbar:new Ext.PagingToolbar({
pageSize: pageSize,
store: newsStore,
displayInfo: true,
displayMsg: '当前显示 {0} - {1} ，共{2}条记录',
emptyMsg: "没有数据",
items: ['-']
})
});
4.在Ext初始化时对store的load事件加入start和limit参数：
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = path + '/js/ext/resources/images/default/s.gif';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init();
new Ext.Viewport({
layout: 'fit',
items: [newsGrid]
});
newsStore.load({params:{start:0,limit:40}});
/*解决日期控件在谷歌浏览器中的样式问题*/
if(Ext.isChrome==true){
var chromeDatePickerCSS = ".x-date-picker {border-color: #1b376c;background-color:#fff;position: relative;width: 185px;}";
Ext.util.CSS.createStyleSheet(chromeDatePickerCSS,'chromeDatePickerStyle');
}
});
5.Servlet代码：
String paras = request.getParameter("pParas");
String typeStr = request.getParameter("pType");;
String startStr = request.getParameter("start")==null?"0":request.getParameter("start");
String limitStr = request.getParameter("limit")==null?"0":request.getParameter("limit");
if (typeStr == null || typeStr.equals("")) {
typeStr = "-1";
}
int type = Integer.valueOf(typeStr);
int start = Integer.valueOf(startStr);
int limit = Integer.valueOf(limitStr);
INewsDao newsDao = new NewsDaoImpl();
int count = newsDao.getNewsCount(type, paras);
String data = newsDao.getNews(start, limit, type, paras);
String json = "{\"totalCount\":" + count + ",\"data\":" + data + "}";
response.setContentType("text/json;charset=UTF-8");
out = response.getWriter();
out.print(json);
out.close();
return;
6.获取News新闻信息的Dao方法：
public String getNews(int start, int limit, int type, String paras) {
Session s = null;
String data = null;
try {
s = HibernateUtil.getSession();
s.beginTransaction();
StringBuffer sb = new StringBuffer("select * from news");
if (paras != null && !paras.equals("")) {
sb.append(" where title like '%" + paras + "%'");
if (type != -1) {
sb.append(" and type ="+type);
}
}else if (type != -1) {
sb.append(" where type = " + type);
}
sb.append(" order by create_date desc");
SQLQuery query = s.createSQLQuery(sb.toString());
query.setFirstResult(start)
.setMaxResults(limit);//分页
List<News> list = query.addEntity(News.class).list();
data = JSON.toJSONString(list);//通过fastjson将list转成json字符串
s.getTransaction().commit();
} catch (Exception e) {
logger.error(e.toString());
HibernateUtil.endSession(s);
} finally {
HibernateUtil.endSession(s);
}
return data;
}
注意：获取到的list要用FastJson转化成Json字符串
获取到的List(News)转化成的Json数据：
[
{
"content": " 测试上传文件34",
"createDate": "2014-12-10 15:57:51",
"creator": "管理员",
"dir": "D:\\Program Files\\apache-tomcat-7.0.27\\webapps\\czfc\\newsHtmls\\2014\\12",
"fileName": "1418198271600.html",
"id": 146,
"ishot": 0,
"status": 1,
"tag": "测试上传文件",
"title": "测试上传文件",
"type": 1,
"uploadDir": "D:\\newsFile\\2014\\12",
"uploadFile": "HtmleditorDemo.rar"
},
{
"content": "坚持以提高经济发展质量和效益为中心，主动适应经济发展新常态，保持经济运行在合理区间。",
"createDate": "2014-12-09 09:44:39",
"creator": "管理员",
"dir": "D:\\Program Files\\apache-tomcat-7.0.27\\webapps\\czfc\\newsHtmls\\2014\\12",
"fileName": "1418089479358.html",
"id": 136,
"ishot": 1,
"status": 1,
"tag": "“新常态”思路下，2015年经济增长目标会否下调，是否会降息、降准，明年经济工作的主要任务又会重点聚焦哪些领域，持续引发关注。",
"title": "聚焦中央经济工作会议：新常态下经济增速引关注",
"type": 1,
"uploadFile": "news.txt"
}
]
最终传回页面的带totalCount的Json数据：
{
"totalCount": 2,
"data": [
{
"content": " 测试上传文件34",
"createDate": "2014-12-10 15:57:51",
"creator": "管理员",
"dir": "D:\\Program Files\\apache-tomcat-7.0.27\\webapps\\czfc\\newsHtmls\\2014\\12",
"fileName": "1418198271600.html",
"id": 146,
"ishot": 0,
"status": 1,
"tag": "测试上传文件",
"title": "测试上传文件",
"type": 1,
"uploadDir": "D:\\newsFile\\2014\\12",
"uploadFile": "HtmleditorDemo.rar"
},
{
"content": "坚持以提高经济发展质量和效益为中心，主动适应经济发展新常态，保持经济运行在合理区间。",
"createDate": "2014-12-09 09:44:39",
"creator": "管理员",
"dir": "D:\\Program Files\\apache-tomcat-7.0.27\\webapps\\czfc\\newsHtmls\\2014\\12",
"fileName": "1418089479358.html",
"id": 136,
"ishot": 1,
"status": 1,
"tag": " “新常态”思路下，2015年经济增长目标会否下调，是否会降息、降准，明年经济工作的主要任务又会重点聚焦哪些领域，持续引发关注。",
"title": "聚焦中央经济工作会议：新常态下经济增速引关注",
"type": 1,
"uploadFile": "news.txt"
}
]
}
图示：
相关推荐
下面将详细阐述EXTJS分页的核心概念、实现方法以及DAO和Action在其中的作用。 一、EXTJS分页核心概念 1. Store：EXTJS中的Store是用来存储数据的容器，它可以连接到各种数据源，包括本地数组、远程JSON、XML等。...
在开发基于Extjs的应用程序时，分页是一项常用且重要的功能。然而，在实际应用过程中可能会遇到一些问题，比如当用户点击“下一页”时，原有的查询条件未能正确传递到后端，导致返回的数据与预期不符。本文将详细...
以下是对EXTJS分页后台处理的详细说明： 首先，`Store`对象是EXTJS中用于存储数据的核心组件。在你的代码中，`Store`被创建并配置了`baseParams`、`JsonReader`和`HttpProxy`。 1. `baseParams`: 这个属性用于传递...
在IT领域，SSH和ExtJS是两种常用的开发技术。SSH是指Spring、Struts和Hibernate三个开源框架的组合，常用于构建企业级Java Web应用。而ExtJS是一个强大的JavaScript库，用于构建用户界面，特别是数据驱动的富客户端...
同时，EXTJS还支持数据过滤和排序，结合分页使用可以提供更好的用户体验。 7. 示例代码 创建一个树型分页组件的基本步骤如下： ```javascript var store = Ext.create('Ext.data.TreeStore', { model: '...
总结来说，实现ExtJS分页查询的关键在于前端和后端的协同工作。前端通过Store、Proxy和Paging Toolbar处理用户交互，后端通过Servlet接收请求，执行数据库操作，并返回符合约定的数据格式。通过这种方式，可以有效地...
以上是ExtJS Grid实现后台分页的基础步骤和关键概念。实际应用中，可能还需要处理更多的细节，如错误处理、动态加载列等。对于初学者来说，理解这些核心概念并结合具体的代码示例进行实践，能有效提升ExtJS开发能力...
EXTJS通过其Grid组件支持分页，Grid组件是一个可配置的表格视图，能够显示大量数据并进行排序、筛选和分页操作。 首先，我们需要创建一个EXTJS Grid组件。在JS文件中，定义Grid的基本配置，包括列模型（column ...
ExtJS 分页是一种在Web应用中管理大量数据的常见技术，尤其在与Spring MVC框架集成时，能够提供高效的数据展示和交互。在ExtJS中，分页通常与数据网格（Grid）组件一起使用，用于显示从后端服务（如SQL Server 2008...
本文将详细介绍EXTJS中两种主要的前后台数据传递方法：`Ext.Ajax.request` 和 `FormPanel` 的 `getForm().submit()`。 首先，`Ext.Ajax.request` 是EXTJS提供的一个全局Ajax对象，用于发送异步HTTP请求。它的基本...
综上所述，ExtJS Grid的分页功能提供了一种高效的方式来处理和展示大量数据。通过合理的配置和使用，可以创建出响应快速、用户体验良好的数据网格应用。理解并熟练掌握这些概念和技术，对于开发高效、用户友好的Web...
在这个场景中，我们关注的是在EXTJS的Combobox（下拉框）组件中实现分页和动态加载数据的功能。Combobox通常用于展示有限数量的选项，但在大数据集的情况下，一次性加载所有数据可能导致页面性能下降。因此，引入...
本文详细介绍了EXTJS中`GridPanel`分页技术的具体实现过程，包括客户端和服务端两大部分。通过上述步骤可以实现一个完整的分页功能，不仅能够提高用户体验，还能够有效提升应用程序的性能。开发者可以根据实际需求...
以上是 `Extjs` 中常用的表单类及其属性和方法的详细介绍，这些类和方法提供了丰富的功能，帮助开发者快速构建功能完备的 Web 表单应用。通过掌握这些基础知识，可以有效地提高开发效率并确保应用程序的质量。
本篇将深入探讨ExtJS中的"Chekboxtree"（复选框树）与"PagingTreeLoader"（分页树加载器）这两个特性，以及如何结合它们实现多选和分页功能。 "Chekboxtree"是ExtJS中的一种特殊树形组件，它允许用户通过复选框选择...
Spring MVC、MyBatis、Ehcache和ExtJS这四个技术组件都是开发者们在构建此类应用时常常使用的工具。让我们详细了解一下这些技术以及它们如何协同工作。 首先，Spring MVC是Spring框架的一个模块，专门用于构建Web...
通过扩展TreeLoader，我们可以添加新的方法和属性来支持分页加载。例如，可以添加一个`pageSize`属性来定义每页显示的节点数量，以及一个`loadPage`方法来请求特定页码的数据。 **PagingToolbar的扩展** ...
很多同事在用extjs grid做分页的时候，往往会想用grid的多选功能来实现导出Excel之类的功能（也就是所谓的多选记忆功能），但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
非传统分页工具. 简单说明下: 显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号， 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能....
### Struts2+Json+ExtJS分页技术详解 #### 一、技术背景与概述 在Web开发领域，实现高效的数据展示与交互是至关重要的。本文档将介绍如何使用Struts2框架结合JSON数据格式以及ExtJS前端库来实现动态分页功能。此...