extjs_02_grid显示本地数据、显示跨域数据


Posted in Javascript onJune 23, 2014

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.显示本地数据
extjs_02_grid显示本地数据、显示跨域数据

<%@ 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数据
extjs_02_grid显示本地数据、显示跨域数据

<%@ 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>
Javascript 相关文章推荐
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
javascript 验证日期的函数
Mar 18 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 #Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 #Javascript
Window.Open如何在同一个标签页打开
Jun 20 #Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 #Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 #Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 #Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 #Javascript
You might like
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
web打印小结
2017/01/11 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
分享Python文本生成二维码实例
2016/01/06 Python
Python退火算法在高次方程的应用
2018/07/26 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
python访问hdfs的操作
2020/06/06 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
营销学习心得体会
2014/09/12 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
数据设计之权限的实现
2022/08/05 MySQL