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 相关文章推荐
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
WEEX环境搭建与入门详解
Oct 16 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
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 采集程序 常用函数
2008/12/18 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
前端微信支付js代码
2016/07/25 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
Python读写ini文件的方法
2015/05/28 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python调用staf自动化框架的方法
2018/12/26 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
《九色鹿》教学反思
2014/02/27 职场文书
初中生操行评语大全
2014/04/24 职场文书
旅游文化节策划方案
2014/06/06 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis