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中的运用上部
Nov 20 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
详解JS数值Number类型
Feb 07 Javascript
使用vue制作滑动标签
Sep 21 Javascript
angular异步验证器防抖实例详解
Mar 31 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+MySQL投票系统的设计和实现分享
2012/09/23 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
完美解决AJAX跨域问题
2013/11/01 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
使用Python生成url短链接的方法
2015/05/04 Python
python文件的md5加密方法
2016/04/06 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Django框架封装外部函数示例
2019/05/28 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
Python @property使用方法解析
2019/09/17 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
继承权公证书
2014/04/09 职场文书
冬季施工防火方案
2014/05/17 职场文书
争做文明公民倡议书
2014/08/29 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
工会经费申请报告
2015/05/15 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL