<%@ 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>
相关推荐
在这个"Ext Grid简单实例"中，我们将探讨如何从Web服务提取数据并将其在Grid中显示。 首先，让我们了解基本的Ext Grid组成部分： 1. **Store**: Store是数据存储的地方，它可以连接到不同的数据源，如JSON、XML或...
renderTo: Ext.getBody() // 将Grid渲染到页面上 }); ``` 在描述中提到的".sql脚本"可能用于创建数据库表结构和填充测试数据。在EXT-JS和JSON应用中，SQL脚本通常用于服务器端，处理数据的增删改查操作，并将结果...
在IT领域，尤其是在Web开发中，"ext grid json分页显示"是一个常见的需求，它涉及到前端数据展示和后端数据交互的关键技术。本例中提到的解决方案是利用DWR（Direct Web Remoting）和EXT.js库来实现。下面将详细阐述...
本教程将通过一个简单的EXT Grid实例，帮助你理解和掌握EXT Grid的基本用法。 首先，EXT Grid的基础构建涉及到以下几个主要组件： 1. **Store**：存储数据的容器，可以是JSON格式、数组或者从服务器动态获取。在...
总之，本文提供了一个简单的 Ext JS Grid 实现案例，通过这个案例，读者可以了解到如何在一个 JSP 页面中嵌入 Ext JS 的 Grid 组件，并对其进行基本配置。此外，还介绍了一些扩展知识点，帮助开发者更全面地理解如何...
3. **Store配置**：在创建Grid时，我们需要定义一个Store，并设置其URL属性指向JSON数据的来源。Store还包含字段定义，用于解析JSON响应中的数据。 4. **Column Configuration**：Grid的列是通过ColumnModel配置的...
在学习EXT的过程中，建议结合实际案例进行实践，例如创建一个简单的数据管理应用，包含数据加载、编辑、保存等功能。这样不仅能帮助理解EXT的各个组件和API，还能提升解决实际问题的能力。EXT社区提供了丰富的资源和...
以下是一个简单的示例，展示了如何使用EXT JS从XML数据中创建一个可编辑的Grid： ```javascript // 创建XMLReader var reader = new Ext.data.XmlReader({ record: 'item', // XML节点名 fields: [{name: 'field1...
`Ext.grid.Grid`是Ext JS库中的一个组件，用于创建可交互的数据网格，而DWR（Direct Web Remoting）则是一种允许JavaScript和Java在浏览器端进行安全、高效通信的技术。本篇文章将深入探讨如何利用这两者结合，实现...
本示例探讨了如何结合Ext JS（一个强大的JavaScript框架）和Servlet（Java Web开发中的服务器端组件）来实现简单的分页功能。下面将详细解释这个主题。 首先，Ext JS是一个用于构建用户界面的前端JavaScript库，它...
var grid = Ext.create('Ext.grid.Panel', { title: '论坛帖子列表', store: store, // 绑定数据存储 columns: [ // 定义列配置 { text: '设备编号', dataIndex: 'deviceno', flex: 1 }, { text: '标题', ...
3. 动态加载与分页：EXT的Store和Grid组件支持从服务器动态加载数据，实现分页功能，提高用户体验。 4. 响应式设计：EXT的布局和组件能够根据设备和浏览器窗口大小自动调整，确保在不同设备上都能良好显示。 5. 异步...
`ext3.*` 指的是Ext JS库的第三大版本，这是一个流行的JavaScript框架，用于构建富客户端应用程序，包括各种图表组件。本例子将关注如何使用Ext JS 3.x版本创建柱状图，包括设置固定值和动态从后台获取数据来绘制...
myGrid = Ext.create('Ext.grid.Panel', { // 配置项... }); // 添加到容器或布局 Ext.container.Viewport.add(myGrid); } else { // 重新加载数据 myGrid.store.loadData(newData); } } ``` 在这个例子中...
3. **创建Grid**：使用`Ext.grid.GridPanel`组件。 ```javascript // 创建数据存储 var store = new Ext.data.ArrayStore({ fields: ['name', 'email'], data : [['Tom', 'tom@example.com'], ['Jerry', 'jerry@...
如何在页面中引用ext A.3.1. 顺便说说常见的Ext is not defined错误 A.4. 想把弹出对话框单独拿出来用的看这里 A.5. 想把日期选择框单独拿出来用的看这里 A.6. 听说有人现在还不会汉化ext A.7. 碰到使用ajax获得...
标题中的“Ext 对数据库操作的简单实例”指的是使用Ext JS框架进行数据库交互的实际应用。Ext JS是一个用于构建富客户端Web应用程序的JavaScript库，它提供了丰富的组件和强大的数据管理功能，可以方便地与后端...
本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载，这在构建可扩展且高效的Web应用时非常关键。通过动态加载，我们可以避免一次性加载所有标签页内容，从而改善用户体验，减少初次加载时的网络负担。 ...
"Ext Form GridPanel"是Ext JS库中的一个重要组件，它结合了表格（Grid）和表单（Form）的功能，提供了一种强大而灵活的方式来显示和编辑数据。在Web应用程序开发中，这种组件常用于数据录入和展示，尤其适用于处理...
3. **Grid Panel**：EXT的表格组件功能强大，支持多列排序、分页、行选择、编辑等功能，可以处理大量数据并提供良好的用户体验。 4. **Form Components**：EXT提供了丰富多样的表单组件，如文本框、下拉框、日期...