您的位置：首页 > 编程语言 > Java开发

Ext 简单页面和java后台数据交互

2017-06-23 09:32 357 查看

前端页面：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%String path = request.getContextPath();//代表根目录%>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>余额查询</title>
<link rel="stylesheet" type="text/css" href="<%=path %>/content/scripts/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="<%=path %>/content/scripts/extjs/ext-base.js"></script>
<script type="text/javascript" src="<%=path %>/content/scripts/extjs/ext-all.js"></script>
<script type="text/javascript" src="<%=path %>/content/scripts/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/content/scripts/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var store = new Ext.data.JsonStore({//获得数据
url:'<%=path %>/oneCardPassage/showCardBalanceList.do',
root:'root',
totalProperty:'total',
autoLoad: {params:{start:0, limit:50}},
fields:Ext.data.Record.create([
{name:'userId'},{name:'createDate'},{name:'batchId'},
{name:'endDate'},{name:'stationId'},{name:'cardPass'},
{name:'maxOnce'},{name:'maxMore'},{name:'cost'},
{name:'foregift'},{name:'bankAccount'},
])
});
var grid = new Ext.grid.GridPanel({//数据列表
store: store,
cm:new Ext.grid.ColumnModel([
{header:'用户',dataIndex:'userId',width:150},
{header:'开户日期',dataIndex:'createDate',width:150},
{header:'批次',dataIndex:'batchId',width:150},
{header:'有效日期',dataIndex:'endDate',width:100},
{header:'身份ID',dataIndex:'stationId',width:100},
{header:'个人密码',dataIndex:'cardPass',width:100},
{header:'单次限额',dataIndex:'maxOnce',width:100},
{header:'累计限额',dataIndex:'maxMore',width:150},
{header:'卡成本',dataIndex:'cost',width:100},
{header:'卡押金',dataIndex:'foregift',width:150},
{header:'银行账号',dataIndex:'bankAccount',width:150}
]),
stripeRows:true,//行分隔符
columnLines:true,//列分隔符
//autoExpandColumn:'autoGrade', //自动扩展列
loadMask:true,//加载时的遮罩
frame : true,
title:'卡余额查询',
tbar:["搜索栏","-","用户姓名:",new Ext.form.TextField({id:'userId',width:97}),"-",
"开卡批次:",new Ext.form.TextField({id:'batchId',width:100}),"-",
new Ext.Toolbar.Button({id:'searchBtn',text:'搜索',width:50,
icon:'<%=path%>/content/images/search.png',
handler: function(){
store.on('beforeload',function(){
store.baseParams.userId=Ext.getCmp('userId').getValue();
store.baseParams.batchId=Ext.getCmp('batchId').getValue();
});
store.reload({params:{start:0, limit:50}});
}
}),"-",new Ext.Toolbar.Button({text:'清空条件',width:50,
icon:'<%=path%>/content/images/setEmpt.jpg',
handler: function(){
Ext.getCmp('userId').setValue("");
Ext.getCmp('batchId').setValue("");
}
})
],
bbar:new Ext.PagingToolbar({//定义底部显示分页
pageSize: 50, //分页尺寸的调整需要两处修改这里是一处，另外一处是store的limit
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});
store.on('beforeload',function(){
store.baseParams.userId='';
store.baseParams.batchId='';
});
new Ext.Viewport({
layout:'border',
items:[{
region:'center',
layout:'fit',
border:false,
items:grid
}]
});
});
</script>
</head>
<body>
</body>
</html>后台代码：
注：这段代码是自己的写的，主要是要说明ext的store里的url访问时需要返回一个对象的集合List<T>
public List<YktSdtUserCardInfomTable> findCardBalance(int start, int limit,String[] condition) {
List<YktSdtUserCardInfomTable> list=null;
String hql="from YktSdtUserCardInfomTable where 1=1";
if(!condition[0].equals("")){
hql=hql+" and userId like '%"+condition[0]+"%'";
}
if(!condition[1].equals("")){
hql=hql+" and batchId like '%"+condition[1]+"%'";
}
try {
list=(List<YktSdtUserCardInfomTable>) dao.findByPage(hql, start, limit);
} catch (Exception e) {
System.out.println("根据条件查询一卡通卡余额出错");
}
return list;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航