我要评论1.显示表格
http://img.blog.csdn.net/20140622133941015?watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvywrhbv93enm=/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/southeast
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>my jsp 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_cn.js"></script>
<script type="text/javascript">
ext.onready(function() {
// 定义表格
var grid = new ext.grid.panel({
columns : [ {
text : '行号'
}, {
text : '学号'
}, {
text : '姓名'
}, {
text : '班级'
}, {
text : '语文'
}, {
text : '数学'
}, {
text : '英语'
} ]
});
// 定义窗口
var window = ext.create("ext.window.window", {
title : '学生成绩表',
width : 600,
height : 400,
items : grid,
layout : 'fit'//表格填充窗口
});
// 显示窗口
window.show();
});
</script>
</head>
<body>
显示表格
<br>
</body>
</html>
2.显示本地数据
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>my jsp 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_cn.js"></script>
<script type="text/javascript">
ext.onready(function() {
// 自定义数据模型
var mymodel = ext.define("studentinfo", {
extend : 'ext.data.model',
fields : [ {
name : 'stuno',
type : 'string'
}, {
name : 'stuname',
type : 'string'
}, {
name : 'stuclass',
type : 'string'
}, {
name : 'chscore',
type : 'number'
}, {
name : 'mascore',
type : 'number'
}, {
name : 'enscore',
type : 'number'
} ]
});
// 本地数据
var mydata = [ [ 'no1', 'wangzs1', '1年级', 80, 67, 49 ],
[ 'no2', 'wangzs2', '2年级', 65, 57, 79 ],
[ 'no3', 'wangzs3', '3年级', 45, 77, 59 ],
[ 'no4', 'wangzs4', '4年级', 99, 27, 19 ],
[ 'no5', 'wangzs5', '5年级', 23, 97, 99 ],
[ 'no6', 'wangzs6', '6年级', 34, 67, 99 ], ];
var mystore = ext.create("ext.data.store", {
model : 'studentinfo',
data : mydata
});
// 表格
var mygrid = new ext.grid.panel({
columns : [ {
xtype : 'rownumberer',
text : '行号'
}, {
text : '学号',
dataindex : 'stuno'
}, {
text : '姓名',
dataindex : 'stuname'
}, {
text : '班级',
dataindex : 'stuclass'
}, {
text : '语文',
dataindex : 'chscore'
}, {
text : '数学',
dataindex : 'mascore'
}, {
text : '英语',
dataindex : 'enscore'
} ],
store : mystore
});
// 窗口
var window = ext.create("ext.window.window", {
title : '学生成绩表',
width : 600,
height : 400,
items : mygrid,
layout : 'fit'
});
window.show();
});
</script>
</head>
<body>
显示本地数据
<br>
</body>
</html>
3.显示跨域jsonp数据
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>my jsp 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_cn.js"></script>
<script type="text/javascript">
ext.onready(function() {
// 自定义数据模型
var jsonpmodel = ext.define("jsonpmodel", {
extend : 'ext.data.model',
fields : [ {
name : 'userid',
type : 'string'
}, {
name : 'username',
type : 'string'
}, {
name : 'dateline',
type : 'string'
}, {
name : 'title',
type : 'string'
} ]
});
// 数据
var mystore = ext.create("ext.data.store", {
model : 'jsonpmodel',
pagesize : 10,//配置每页显示记录数
proxy : {
type : 'jsonp',
url : 'http://www.sencha.com/forum/topics-browse-remote.php',
reader : {
totalproperty : 'totalcount',
root : 'topics'
}
},
autoload : true
// 自动加载数据
});
// 表格
var mygrid = new ext.grid.panel({
columns : [ {
xtype : 'rownumberer',
text : '行号'
}, {
text : '用户id',
dataindex : 'userid'
}, {
text : '用户姓名',
dataindex : 'username'
}, {
text : '时间线',
dataindex : 'dateline'
}, {
text : '标题',
dataindex : 'title'
} ],
store : mystore,
bbar : {// 在表格底部 配置分页
xtype : 'pagingtoolbar',
store : mystore,
displayinfo : true
}
});
// 窗口
var window = ext.create("ext.window.window", {
title : '学生成绩表',
width : 600,
height : 400,
items : mygrid,
layout : 'fit'
});
window.show();
});
</script>
</head>
<body>
显示跨域jsonp数据
<br>
</body>
</html>
发表评论