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=# οnclick=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;
}