- <link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script>
- <script type="text/javascript" src="js/overLoad.js"></script>
- <script type="text/javascript" src="ext-3.1.0/ext-lang-zh_CN-min.js"></script>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
- <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″ />
- <meta http-equiv="Cache-Control" content="no-store"/>
- <meta http-equiv="Pragma" content="no-cache"/>
- <meta http-equiv="Expires" content="0"/>
- <!-- 是个策略 表示页面加载完成后开始执行 -->
- <script type="text/javascript">
- Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif';
- </script>
- <!--继承了项目中要用到的所有外部文件信息-->
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title></title>
- <STYLE TYPE="text/css">
- #content {
- width: 100%;
- height: 100%;
- }
- .add {
- background-image: url(images/icon/add.gif) !important;
- }
- .update {
- background-image: url(images/icon/update.gif) !important;
- }
- .delete {
- background-image: url(images/icon/delete.gif) !important;
- }
- .assign {
- background-image: url(images/icon/list-items.gif) !important;
- }
- .ux-combo-selectall{
- padding:3px;
- }
- .ux-combo-selectall-icon-checked{
- background: transparent url(ext-3.1.0/resources/images/default/menu/checked.gif);
- }
- .ux-combo-selectall-icon-unchecked {
- background: transparent url(ext-3.1.0/resources/images/default/menu/unchecked.gif);
- }
- .ux-combo-selectall-icon {
- text-indent:1.8em;
- background-position: 3px 2px ! important;
- background-repeat:no-repeat ! important;
- height:22px;
- line-height:20px;
- font-size:12px;
- font-weight:bold;
- -moz-user-select:none;
- }
- .ux-lovcombo-icon {
- width:16px;
- height:16px;
- float:left;
- background-position: -1px -1px ! important;
- background-repeat:no-repeat ! important;
- }
- .ux-lovcombo-icon-checked {
- background: transparent url(ext-3.1.0/resources/images/default/menu/checked.gif);
- }
- .ux-lovcombo-icon-unchecked {
- background: transparent url(ext-3.1.0/resources/images/default/menu/unchecked.gif);
- }
- /* IE patch */
- .ext-ie .ux-lovcombo-item-text {
- position:absolute;
- left:16px;
- top:3px;
- }
- .ext-ie .ux-lovcombo-icon {
- float:none;
- }
- .ext-ie .x-combo-list-item {
- position:relative;
- }
- </STYLE>
- <script type="text/javascript" src="js/Ext.ux.form.LovCombo.js"></script>
- <script type="text/javascript"><!--
- var grid;
- var menuForm;
- var win;
- var appPvWin;
- var columnPvWin;
- var appPvStore;
- Ext.onReady(function(){
- Ext.QuickTips.init();
- Ext.form.Field.prototype.msgTarget = 'qtip';//统一指定错误信息提示方式
- var menuRecord=Ext.data.Record.create([
- {name:'nt'},
- {name:'yc'},
- {name:'sq'},
- {name:'cz'},
- {name:'xz'},
- {name:'yz'},
- {name:'lyg'},
- {name:'ha'},
- {name:'wx'},
- {name:'tz'},
- {name:'nj'},
- {name:'zj'},
- {name:'sz'}
- ]);
- var creader = new Ext.data.JsonReader({ root : "date"}, menuRecord);
- var store = new Ext.data.Store({
- //autoLoad : {params : {start : 0,limit : 15}},//自动加载
- autoLoad : false,
- reader :creader ,
- proxy : new Ext.data.HttpProxy({//获得交给DataReader解析的数据
- url : 'statistiweb.sp?method=getInstallSiteByArea',
- method : 'POST'
- })
- });
- //表格grid的列
- var cm = new Ext.grid.ColumnModel([
- new Ext.grid.CheckboxSelectionModel(),
- { header : '南京',dataIndex: 'nj', sortable:false},
- { header : '苏州',dataIndex: 'sz', sortable:false},
- { header : '无锡',dataIndex: 'wx', sortable:false },
- { header : '常州',dataIndex: 'cz', sortable:false },
- { header : '镇江',dataIndex: 'zj', sortable:false },
- { header : '扬州',dataIndex: 'yz', sortable:false},
- { header : '南通',dataIndex: 'nt', sortable:false},
- { header : '泰州',dataIndex: 'tz', sortable :false},
- { header : '徐州',dataIndex: 'xz', sortable:false },
- { header : '淮安',dataIndex: 'ha', sortable:false},
- { header : '盐城',dataIndex: 'yc', sortable:false},
- { header : '连云港',dataIndex: 'lyg', sortable:false},
- { header : '宿迁',dataIndex: 'sq', sortable:false}
- ]);
- //表格面板
- grid = new Ext.grid.GridPanel({
- region : 'center',
- margins: '3 3 3 3',
- autoWidth:true,
- frame : false,
- store : store,
- minColumnWidth : 100, //设置每列最小宽度
- cm : cm, //设置列
- sm : new Ext.grid.RowSelectionModel({ singleSelect : true }),
- viewConfig : { autoFit : true },
- width : Ext.get("content").getWidth(),
- height : Ext.get("content").getHeight(),
- loadMask : {msg : '正在加载数据，请稍侯……'}
- });
- var panel = new Ext.Panel({
- title : '各地市装机量',
- layout : 'border',
- border : true,
- width : Ext.get("content").getWidth(),
- height : Ext.get("content").getHeight(),
- applyTo : 'panel-div',
- items : [grid],
- buttons:[new Ext.Button({
- text : '查询',
- handler : query
- })]
- //items : [form,grid]
- });
- function query() {
- grid.getStore().reload({params : {
- //startDate : startDate,
- //endDate : endDate
- }});
- }
- });// End of Ext.onReady
- --></script>
- </head>
- <body>
- <div id="content">
- <div id='panel-div'></div>
- </div>
- </body>
- </html>
后台：
- /**计算装机量（分地市）**/
- //http://localhost:8080/smartjsmgr/statistiweb.sp?method=getInstallSiteByArea
- @RequestMapping(params = "method=getInstallSiteByArea", method = RequestMethod.POST)
- public ModelAndView getInstallSiteByArea(HttpServletRequest request,HttpServletResponse response){
- Map<String,Object> map = new HashMap<String,Object>();
- List<Statistiweb> list=new ArrayList<Statistiweb>();
- try {
- list=statistiwebService.getInstallSiteByArea();
- if (list.size()>0) {
- map.put("date", list);
- map.put("success", "true");
- }else{
- map.put("success", "false");
- }
- } catch (Exception e) {
- // TODO: handle exception
- e.printStackTrace();
- logger.error("查询计算装机量（分地市）失败！！！");
- }
- return new ModelAndView("jsonView",map);
- }
本文转自 梦朝思夕 51CTO博客，原文链接:http://blog.51cto.com/qiangmzsx/1175064
