1.显示表格

<%@ 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>

extjs_02_grid(显示本地数据，显示跨域数据)的更多相关文章

  1. JSONP -- 跨域数据交互协议

    一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...

  2. ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝 ...

  3. ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...

  4. iframe跨域数据传递

    项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...

  5. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  6. Vue.js——基于$.ajax实现数据的跨域增删查改

    转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...

  7. JSONP跨域数据调用

    引自:http://kb.cnblogs.com/page/139725/ Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如& ...

  8. JSONP(跨域请求) —— 一种非官方跨域数据交互协议

    1.JSONP的作用 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,为 了实现跨域请求,可以通过script标签实现跨域请求,然后再服务器端输出JSON数 ...

  9. html5跨域数据传递（postMessage）

    在html5中有个支持跨域传递的方法postMessage,可是实现iframe之间的数据传递! 代码如下:数据发送页面 <!DOCTYPE HTML> <html lang=&qu ...

随机推荐

  1. Nexus 7 跳过网络验证

     本文从著名安卓论坛 xda-developers 搬运而来,原文链接 http://forum.xda-developers.com/showthread.php?t=1909602 由于众所周知的 ...

  2. 转贴:C++中指针和引用的区别

    从概念上讲.指针从本质上讲就是存放变量地址的一个变量,在逻辑上是独立的,它可以被改变,包括其所指向的地址的改变和其指向的地址中所存放的数据的改变. 而引用是一个别名,它在逻辑上不是独立的,它的存在具有 ...

  3. SQLite 对中文路径的支持（用到了StringToWideChar和Utf8Encode在D7的System单元中自带）

    最近用SQLITE作为数据库,发现,如果直接传递带中文路径或文件名的数据库,会导致无法打开数据库的情况.看了一下SQLITE的源码,才发现,原来SQLITE中是用UTF8编码进行文件打开操作的. 所以 ...

  4. Qt 静态函数QMetaObject::connectSlotsByName(QObject * object)按命名规则自动connect，不需要手动connect

    看别人代码看到void on_MyWidget_slotTest(); 就郁闷了,没看到他代码里有connect 却能把信号和槽可以连接起来. 今日回顾书本发现该函所的nb之处. QMetaObjec ...

  5. jap中文转码

    因为js url在传值的过程中使用的是js自己默认的字符集编码规则,我们必须把它转成属于我们自己的编码规格,JSP页面 url=encodeURI(encodeURI(url)); //用了2次enc ...

  6. PHP curl传输文件的版本兼容性

    /** * 存储文件到远程服务器 * * @param string $filePath * 文件绝对路径 * @param string $fileSaveUrl * 存储的远程目标地址 * @pa ...

  7. WordPress Cart66 Lite插件HTML注入漏洞

    漏洞名称: WordPress Cart66 Lite插件HTML注入漏洞 CNNVD编号: CNNVD-201310-525 发布时间: 2013-10-23 更新时间: 2013-10-23 危害 ...

  8. 把调试好的SQL语句转换为JAVA代码小工具

    关键点:Pattern实现SQL拆解.ZeroClipboard.js实现复制到剪切板 主要代码: <%@ page language="java" import=" ...

  9. 使用VisualStudio进行单元测试之二

    借着工作忙的借口,偷了两天懒,今天继续单元测试之旅.前面说了如何进行一个最简单的单元测试,这次呢就跟大家一起来熟悉一下,在visual studio中如何进行数据驱动的单元测试. 开始之前先来明确一下 ...

  10. input框自动填充内容背景颜色为黄色解决方法

    谷歌浏览器input自动填充内容,背景色会是黄色,想改的话: input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;} 这种方 ...