ExtJS表格示例-阿里云开发者社区

<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

ExtJS表格示例

热门文章

最新文章

相关电子书

相关实验场景