Extjs実装ページング
extjsdemo.jsp:
extjsdemo.js:
アクションメソッド:
<%@ 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');
}アクションメソッド:
/**
* @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;
}