extjs3 简单grid 页面

<%@ 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>

 

posted @ 2015-08-24 21:56  雪来了  阅读(386)  评论(0编辑  收藏  举报