extjsdemo.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'extjsdemo.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.8.2.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/ext-3.3.1/resources/css/ext-all.css">
<script type="text/javascript" src="<%=basePath%>/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>/ext-3.3.1/ext-all.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/test/extjsdemo.js"></script>
</head>
<body>
<form id="reportForm" name="reportForm" action="">
<div id='template_div'></div>
</form>
</body>
</html>
extjsdemo.js:
var win;
var grid;
var opType;
var menuTree;
var otherParams;
var reportId;
var reportInfo;
var myMask;
var gd;
var sysObj = {};
// 获得ID
function getIds(target, id, name) {
var rows = target.getSelectionModel().getSelections();
var selectid = "";
// 获得所选的所有模板id
for ( var i = 0; i < rows.length; i++) {
if (name) {
selectid = selectid + rows[i].get(id) + "-" + rows[i].get(name)
+ ",";
} else {
selectid = selectid + rows[i].get(id) + ",";
}
}
if (selectid.length > 0) {
selectid = selectid.substr(0, selectid.length - 1);
}
return selectid;
}
function closeWin() {
if (win != null) {
win.destroy();
}
}
function moveAllOptions(from, to, flag, key, other) {
var length = from.options.length;
for ( var i = 0; i < length; i++) {
to.options.add(new Option(from.options[i].innerText,
from.options[i].value));
}
DWRUtil.removeAllOptions(from.id);
}
function moveSelectedOptions(from, to, flag, key) {
var index = from.selectedIndex;
if (index != -1) {
var text = from.options[index].innerText;
var value = from.options[index].value;
from.options.remove(index);
to.options.add(new Option(text, value));
}
}
// 封装ALERT
function extAlert(msg, type, func) {
var icon = arguments.length > 1 && type == 1 ? Ext.Msg.INFO : Ext.Msg.ERROR;
Ext.Msg.show( {
title : "信息提示",
msg : msg,
minWidth : 230,
buttons : Ext.Msg.OK,
fn : func,
icon : icon
});
}
Ext.onReady(function() {
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel( {
handleMouseDown : Ext.emptyFn
});
var cm = new Ext.grid.ColumnModel( [ new Ext.grid.RowNumberer(), sm, {
id : 'jgid',
header : "机构名称",
width : 100,
sortable : true,
dataIndex : 'jgmc'
}, {
header : "机构编码",
width : 550,
sortable : true,
dataIndex : 'jgbm'
} ]);
cm.defaultSortable = true;
var curState = $("#curState").val();
var sysType = $("#sysType").val();
if (sysType == undefined || sysType == null || sysType == -1) {
sysType = "";
}
if (curState == -2) {
curState = "";
}
var params = "";
var conn = new Ext.data.Connection( {
url : "ExtjsDeptList",
method : 'post',
extraParams : {
params : params
}
});
var ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy(conn),
reader : new Ext.data.JsonReader( {
totalProperty : 'totalProperty',
root : 'root'
}, [ {
name : "jgid",
mapping : "jgid"
}, {
name : 'jgmc',
mapping : 'jgmc'
}, {
name : 'jgbm',
mapping : 'jgbm'
} ])
});
var tbar = new Ext.Toolbar( {
items : [ '机构名称：', {
xtype : 'textfield',
id : 'jgmc',
width : 120,
listeners : {
specialkey : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
roleSelect();
}
}
}
}, '-', {
text : '查询',
iconCls : 'select-button',
xtype : "button",
cls : 'x-btn x-btn-noicon x-btn-over',
handler : roleSelect
}, '-', {
text : '重置',
iconCls : 'czmm-button',
xtype : "button",
cls : 'x-btn x-btn-noicon x-btn-over',
handler : function() {
resetSearch('jgmc');
roleSelect();
}
} ],
listeners : {
'render' : function() {
var tbar = new Ext.Toolbar( {
items : [ {
text : '添加',
iconCls : 'add-button',
xtype : "button",
cls : 'x-btn x-btn-noicon x-btn-over',
id : 'sysDicTypeAdd',
handler : addtype
}
// ,'-',{
// text:'修改',
// cls:'x-btn x-btn-noicon x-btn-over',
// xtype:'button',
// handler: updateenterpriseinfo
// }
, '-', {
text : '删除',
iconCls : 'delete-button',
cls : 'x-btn x-btn-noicon x-btn-over',
xtype : 'button',
id : 'sysDicTypeDelete',
handler : deletetype
}, {
text : '',
id : 'msgContent'
} ]
});
tbar.render(grid.tbar);
}
}
});
ds.on('beforeload', function() {
var curState = $("#curState").val();
if (curState == -2) {
curState = "";
}
var sysType = $("#sysType").val();
if (sysType == undefined || sysType == null || sysType == -1) {
sysType = "";
}
var params = "";
Ext.apply(this.baseParams, {
params : params
// 分页用
});
});
ds.load( {
params : {
start : 0,
limit : 10,
params : ""
}
});
// 工具栏
var bbars = new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录，共 {2} 条',
emptyMsg : "没有记录",
width : '100%'
});
// 调用公共方法，用来显示每页条数
toSetPageSize(bbars);
grid = new Ext.grid.GridPanel( {
el : 'template_div',
bodyStyle : 'width:100%;height:100%',
autoWidth : false,
autoHeight : true,
autoExpandColumn : "jgid",
store : ds,
cm : cm,
sm : sm,
bbar : bbars,
tbar : tbar
});
grid.render();
});
function roleSelect() {
var conn = new Ext.data.Connection( {
url : 'ExtjsDeptList',
form : 'reportForm',
method : 'post'
});
var params = "params.LIKES_typename="
+ Ext.getCmp("typename").getEl().dom.value;
grid.store.proxy = new Ext.data.HttpProxy(conn);
grid.store.load( {
params : {
start : 0,
limit : grid.getBottomToolbar().pageSize,
params : params
}
});
}
// 重置查询条件
function czSelect() {
Ext.getCmp("typename").getEl().dom.value = "";
}
// 删除
function deletetype() {
var ids = getIds(grid, 'jgid');
if (ids.length < 1) {
showMsg('msgContent', '请至少选择一个类型！');
return;
}
Ext.MessageBox.confirm('确认', "类型将被删除，确实要那么做吗？", function(result) {
if (result == 'yes') {
myMask = new Ext.LoadMask(Ext.getBody(), {
msg : "删除中……"
});
myMask.show();
$.post("delMyDictType", {
ids : ids,
state : -1
}, function(json) {
if (json == 'true') {
showMsg('msgContent', '删除类型信息成功！');
} else {
showMsg('msgContent', '删除类型信息失败！');
}
myMask.hide();
grid.store.reload();
}, "json");
}
});
}
// 添加字典类型信息
function addtype(report_id) {
reportInfo = new ReportInfo();
reportInfo.show(report_id,
'toaddDictType', 570, 180,
'添加字典类型信息', false, 'reportFormsss');
}
function urlInfo(v, m, r) {
var url = r.get("url");
var id = r.get("report_id");
var str = "";
// alert(url);
if (url.length < 50) {
str = str + url;
} else {
str += url.substring(0, 50) + "... ";
str += "<a href=# onclick=showInfo('" + id + "')>详细</a>";
}
return str;
}
function showInfo(id) {
$.post("/edp/custManager!findUrl.action", {
id : id,
state : -1
}, function(json) {
Ext.MessageBox.show( {
title : '详细URL',
msg : json.root,
width : 300,
buttons : Ext.MessageBox.OK,
animEl : 'btn'
});
}, "json");
}
function closeWin() {
reportInfo.close();
}
/**
* 以下是进行每页显示多少条的方法， 其中combo是向PaginToolbar中插入的组建, ps是组建用到的一个数据源
*
* @param {Object}
* bbars
*/
function toSetPageSize(bbars) {
var ps = [ 5, 10, 15, 20, 25, 30, 50, 75, 100, 200, 300, 500];
var combo = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
lazyRender : true,
mode : 'local',
width : 50,
store : ps,
enableKeyEvents : true,
editable : true,
loadPages : function() {
var rowIndex = 0;
var gp = bbars.findParentBy(function(ct, cmp) {
return (ct instanceof Ext.grid.GridPanel) ? true : false;
});
var sm = gp.getSelectionModel();
if (undefined != sm && sm.hasSelection()) {
if (sm instanceof Ext.grid.RowSelectionModel) {
rowIndex = gp.store.indexOf(sm.getSelected());
} else if (sm instanceof Ext.grid.CellSelectionModel) {
rowIndex = sm.getSelectedCell()[0];
}
}
rowIndex += bbars.cursor;
bbars
.doLoad(Math.floor(rowIndex / bbars.pageSize)
* bbars.pageSize);
},
listeners : {
select : function(c, r, i) {
bbars.pageSize = ps[i];
this.loadPages();
},
blur : function() {
var pagesizeTemp = Number(this.getValue());
if (isNaN(pagesizeTemp)) {
this.setValue(bbars.pageSize);
return;
}
bbars.pageSize = Number(this.getValue());
this.loadPages();
}
}
});
// 将组建添加到PaginToolbar中
bbars.insert(10, combo);
//PaginToolbar中添加提示信息和分隔符
bbars.insert(10, '每页显示条数:');
bbars.insert(12, '-');
//设置默认每页显示的条数
combo.setValue('10');
}
action方法:
/**
* @author chenzheng
* @since 2013-9-21
* @Description: extjs分页测试
* @throws
* @return
* String
*/
public String ExtjsDeptList(){
Long fromRow=start+1l;
Long toRow=start+limit;
String sql="select b.* from (select a.*,rownum rn from (select t.jgid,t.jgmc,t.fjgid,t.jgbm from SYS_DEPT t) a where rownum<="+toRow+") b where rn>="+fromRow;
ResultSet rs=SqlHelper.executeQuery(sql, null);
String csql="select count(*) from SYS_DEPT";
ResultSet rs2=SqlHelper.executeQuery(csql,null);
Long totalProperty=0l;
try {
while(rs2.next()){
totalProperty=rs2.getLong(1);
}
} catch (SQLException e1) {
e1.printStackTrace();
}finally{
SqlHelper.close(rs2, SqlHelper.getPs(), SqlHelper.getCt());
}
JSONArray jarray=new JSONArray();
List<Sysdept> list=new ArrayList<Sysdept>();
try {
while(rs.next()){
Sysdept dept=new Sysdept();
dept.setJgid(rs.getString(1));
dept.setJgmc(rs.getString(2));
dept.setFjgid(rs.getString(3));
dept.setJgbm(rs.getString(4));
list.add(dept);
}
} catch (SQLException e) {
e.printStackTrace();
}finally{
SqlHelper.close(rs, SqlHelper.getPs(), SqlHelper.getCt());
}
jarray.addAll(list);
String resultmsg="{totalProperty:"+totalProperty+",root:"+jarray.toString()+"}";
System.out.println(resultmsg);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
PrintWriter pw = null;
try {
pw = response.getWriter();
pw.write(resultmsg);
} catch (IOException e) {
e.printStackTrace();
}
pw.flush();
pw.close();
return null;
}
相关推荐
在本文中，我们将探讨如何使用ExtJS框架结合Java实现数据库数据的分页查询。ExtJS是一个强大的JavaScript库，常用于构建桌面级的Web应用程序，而Java则是一种广泛使用的后端开发语言，常用于处理服务器端逻辑。在这...
本文将深入探讨EXTJS树型分页组件的工作原理、实现方法及其实用价值。 1. 树型分页原理 树型分页不同于传统的表格分页，因为它需要处理的是树状结构的数据。在EXTJS中，树型分页通过只加载当前可视区域的节点来...
在本案例中，我们关注的是"extJs之分页控件"，这将涉及如何使用ExtJS实现分页功能，并讨论"ux.Andrie.pPageSize"这个特定的组件。 分页控件通常与数据网格（Grid）或者数据视图（DataView）一起使用，用于处理...
在这个“EXTJS简单分页例子”中，我们将深入探讨EXTJS如何实现分页功能，以及如何与后台进行交互。 分页是Web应用中常见的数据展示方式，尤其在处理大量数据时，它可以提高页面加载速度并提供良好的用户体验。EXTJS...
在这个场景中，我们关注的是在EXTJS的Combobox（下拉框）组件中实现分页和动态加载数据的功能。Combobox通常用于展示有限数量的选项，但在大数据集的情况下，一次性加载所有数据可能导致页面性能下降。因此，引入...
Store内置了分页功能，通过配置`autoLoad`、`pageSize`等属性可以实现分页加载数据。 2. Grid：EXTJS Grid是数据展示的主要组件，它与Store绑定后，可以自动展示Store中的数据，并支持分页操作，如切换页码、显示每...
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
在本文中，我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先，ExtJS Grid是一种强大的JavaScript组件，用于在Web应用中创建数据网格。它支持各种特性，如排序、过滤、分组、分页等。分页功能特别适用于处理...
很多同事在用extjs grid做分页的时候，往往会想用grid的多选功能来实现导出Excel之类的功能（也就是所谓的多选记忆功能），但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
在EXTJS中，实现分页后台处理主要是通过与服务器端进行数据交互，利用EXTJS的Store组件和HttpProxy。以下是对EXTJS分页后台处理的详细说明： 首先，`Store`对象是EXTJS中用于存储数据的核心组件。在你的代码中，`...
通过标签可以看出，本文主要关注的是如何使用ExtJS与.NET相结合来实现分页功能。接下来，我们将详细探讨这一主题。 #### 部分内容 在给定的部分内容中，可以看到一个完整的ASP.NET页面，包含了ExtJS组件的使用示例...
"Extjs树分页组件扩展"就是为了解决这一问题而设计的，它通过扩展TreeLoader和PagingToolbar，实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...
在本示例中，我们将深入探讨如何使用ExtJS实现动态加载grid，同时实现CRUD（创建、读取、更新、删除）操作和分页功能。 首先，让我们了解什么是Grid。在ExtJS中，Grid是一种数据网格组件，用于展示大量结构化数据。...
ExtJs+Dwr(Grid)实现分页功能，很实用
总的来说，实现一个仿EXTJS的分页工具条需要对JavaScript DOM操作、事件处理、CSS样式以及与后端数据交互有深入理解。"PageTab"文件可能就是这样一个实现，通过分析和学习这个文件，开发者可以更好地掌握JavaScript...
要实现分页树，我们需要做以下几步： 1. **数据模型**：创建一个数据模型（Ext.data.Model），定义树节点的数据结构，包括可能用于查询的字段。 2. **树存储**：创建一个继承自Ext.data.TreeStore的子类，增加分页...
- 使用SQL查询语句实现分页，例如`LIMIT`和`OFFSET`在MySQL中，或`SELECT ... FROM ... WHERE ROWNUM BETWEEN ... AND ...`在Oracle中。 - 数据库查询的结果应转换为JSON格式，并在响应体中返回。 4. **数据绑定*...
ExtJS提供了一个名为pagingToolbar的组件，可以轻松地与数据存储（如TreeStore）集成，实现分页效果。 1. **TreeStore基础**： TreeStore 是 ExtJS 的一种数据存储类，它专门用来处理树状结构的数据。它可以连接到...
ExtJS的PagingStore是其框架中用于实现前端分页功能的重要组件，主要适用于处理大量数据的场景，以提高网页性能并提供良好的用户体验。在ExtJS 3.x版本中，PagingStore是与GridPanel结合使用，使得用户可以逐页加载...
在这个"SSH+ExtJs分页小例子"中，我们将探讨如何将这两种技术结合实现数据分页显示。 首先，我们来看NewsDAO.java文件。这个文件包含了两个关键方法：`findPageAll`和`totalRecord`。`findPageAll`方法实现了分页...