ext3 简单grid 页面 博客分类： EXTJSHtml extjsJavaScript
程序员文章站
2024-03-24 09:16:16
...
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/webapp/systempublic/common.jsp" %>
<%
String bingcount = (String)request.getAttribute("BINGCOUNT");
String messcount = (String)request.getAttribute("MESSCOUNT");
String livecount = (String)request.getAttribute("LIVECOUNT");
%>
<html>
<head>
<title>客户清单管理</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../resources/Datetime2.js"></script>
<script type="text/javascript">
var orgGrid; //系统用户GRID
var store;
var arrStore;
var searchTbar;
var typeStore;
Ext.onReady(function(){
Ext.QuickTips.init();
var myMask = new Ext.LoadMask("grid_inf", {
msg : "正在处理数据,请稍候..."
});
var date = new Date()
var str =date.format("Y");
var str1 = str -1;
var str2 = str -2;
arrStore = new Ext.data.SimpleStore({
fields: [
'id', // valueField
'displayText' //displayField
],
data: [
[str2, str2],
[str1, str1],
[str, str]
]
});
searchTbar = new Ext.Toolbar({
items:[
new Ext.Toolbar.TextItem('选择时间：'),
{
id:'cust_time',
xtype:'combo',
name:'cust_time',
width:100,
mode:'local',
store: arrStore,
hideLabel:true,
valueField: 'id',
triggerAction:"all",
displayField: 'displayText',
emptyText: '请选择...'
},
{
text:'查询',tooltip:"查询",iconCls:'queryIcon',handler:function()
{
btnSearchClick();
}
}
]
});
store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: '<%=basepath%>/custmanager/querycustmanager.action'}),
reader: new Ext.data.JsonReader(
{
totalProperty:"total",
root:"data"
},
[
{name:'MONTH', mapping:'MONTH', type:'string'},
{name:'BINGCOUNT', mapping:'BINGCOUNT', type:'int'},
{name:'LIVECOUNT',mapping:'LIVECOUNT', type:'int'},
{name:'MESSCOUNT', mapping:'MESSCOUNT',type:'int'}
]
),
listeners:{
load: afloadStore //JsonStore执行好触发的事件
}
});
store.on("beforeload",storeLoadFun);
function storeLoadFun(storeObj){
//if(Ext.getCmp('ORG_NAME') != null){
// storeObj.baseParams.orgName = Ext.getCmp('ORG_NAME').getValue();
//}
//if(Ext.getCmp('synchronizationEpgis') != null){
// storeObj.baseParams.synchronizationEpgis = Ext.getCmp('synchronizationEpgis').getValue();
//}
}
orgGrid = new Ext.grid.GridPanel({
renderTo:"grid_inf",
title:"<center>数据查询</center>",
loadMask: {msg:'正在加载数据，请稍侯……'},
stripeRows: true,
bodyStyle:'width:100%',
viewConfig: {forceFit: true},
autoScroll:true,
//disableSelection:true,
store: store,
columns:[{
header:'月份',
align: 'center',
dataIndex: 'MONTH',
width: 80,
sortable: false
},{
header:'绑定用户数',
align: 'center',
dataIndex: 'BINGCOUNT',
width: 80,
sortable: false
},{
header:'活跃用户数',
align: 'center',
dataIndex: 'LIVECOUNT',
width: 80,
sortable: false
},{
header: '消息通知数',
align: 'center',
dataIndex: 'MESSCOUNT',
width: 120,
sortable: false
}
],
listeners:{"render": function(){
}
}
,tbar:searchTbar
});
//给orgGrid加监听事件
new Ext.KeyMap(orgGrid.getEl(), [{
key: 13,
fn: btnSearchClick
}]);
store.load({params:{year:Ext.getCmp('cust_time').getValue()}});
//设置Grid充满整个窗体
orgGrid.setWidth(Ext.getBody().getWidth());
orgGrid.setHeight(Ext.getBody().getHeight()*0.1);
});
function resize(){
//设置Grid充满整个窗体
orgGrid.setWidth(Ext.getBody().getWidth());
orgGrid.setHeight(Ext.getBody().getHeight()*0.09);
}
function changeSf(value){
if(value == "0"){
return "否";
}else if(value == "1"){
return "是";
}else{
return "";
}
}
function btnSearchClick(){
if(Ext.getCmp("cust_time").getRawValue().trim().length == 0)
{
Ext.MessageBox.alert("提示","请选择需要查询的年份。");
}
else
{
orgGrid.setWidth(Ext.getBody().getWidth());
orgGrid.setHeight(Ext.getBody().getHeight()*0.5);
store.reload({params:{year:Ext.getCmp('cust_time').getValue()}});
}
}
function afloadStore(store,records,options)
{
if(store.reader.jsonData["msg"] != null)
{
store.removeAll();
Ext.Msg.alert("错误",store.reader.jsonData["msg"]);
}
if(Ext.getCmp("cust_time").getRawValue().trim().length == 0)
{
//orgGrid.setWidth(Ext.getBody().getWidth());
//orgGrid.setHeight(Ext.getBody().getHeight()*0.5);
// var myChart = new FusionCharts("<%=basepath%>/charts/MSColumn2D.swf", "myChartId", "100%", "215");
// myChart.setDataURL("<%=basepath%>/charts/cusomermanger_year.xml");
// myChart.render("chart_inf");
}
else
{
var chart = new FusionCharts("<%=basepath%>/charts/MSColumn2D.swf", "chartId", "100%", "215");
chart.setDataURL("<%=basepath%>/charts/cusomermanger_month.xml");
chart.render("chart_inf");
}
}
</script>
</head>
<body onload="resize();">
<div id="grid_inf" width="100%" height="50%"></div>
<div id="chart_inf" width="100%" height="50%">
<div height="25%"></div>
<label><center><FONT SIZE="26" COLOR="#000000">统计信息</FONT></center>
<br>
<FONT SIZE="26" COLOR="#000000">微信帐号已绑定用电客户编号统计数: </FONT>
<center> <FONT SIZE="32" COLOR="#CC3333"><U><B><%=bingcount %></B></U></FONT></center>
<br>
<FONT SIZE="26" COLOR="#000000"> 与客户交互的消息统计数:</FONT>
<center><FONT SIZE="32" COLOR="#CC3333"><U><B><%=messcount %></B></U></FONT></center>
<br>
<FONT SIZE="26" COLOR="#000000"> 近一月活跃的用户统计数: </FONT>
<center> <FONT SIZE="32" COLOR="#CC3333"><U><B> <%=livecount %></B></U></FONT></center>
<label>
</div>
</body>
</html>