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. Memcached(二)Memcached Java API基础之MemcachedClient

    1. 构造函数 public MemcachedClient(InetSocketAddress[] ia) throws IOException; public MemcachedClient(Li ...

  2. Tarjan系列算法总结(hdu 1827,4612,4587,4005)

    tarjan一直是我看了头大的问题,省选之前还是得好好系统的学习一下.我按照不同的算法在hdu上选题练习了一下,至少还是有了初步的认识.tarjan嘛,就是维护一个dfsnum[]和一个low[],在 ...

  3. Android用户界面UI组件--AdapterView及其子类(四) GridView

    GridView常用的XML属性: android:columnWidth  设置列的宽度. android:horizontalSpacing  两列之间的间距.  android:numColum ...

  4. bzoj2186

    首先我们看到题目要求的是1~N!内有M!互质的个数 N!>M!,而我们是知道在M!以内与M!互质的数的个数,即phi(M!) 但是M!~N!内与M!互质的数有多少个呢? 对于每个互质的数,如果我 ...

  5. POJ_3181_Dollar_Dayz_(动态规划,完全部分和,完全背包)

    描述   http://poj.org/problem?id=3181 FJ有n元钱,有k种商品,各为1,2,...,k-1,k元,问有多少种花掉这n元钱的方法. Dollar Dayz Time L ...

  6. sudo easy_install MySQL-pythonubuntu常用命令

    修改密码 sudo passwd root 安装openssh-server sudo apt-get install openssh-server 安装easy_install sudo wget ...

  7. [C# 网络编程系列]专题三：自定义Web服务器

    转自:http://www.cnblogs.com/zhili/archive/2012/08/23/2652460.html 前言: 经过前面的专题中对网络层协议和HTTP协议的简单介绍相信大家对网 ...

  8. HDOJ --- 2577

    How to Type Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...

  9. selenium webdriver(2)---页面对象定位

    webdriver的元素定位很灵活,提供了多种定位方式: Id LinkText PartialLinkText Name TagName Xpath ClassName CssSelector 这些 ...

  10. Python的模块，模块的使用、安装，别名，作用域等概念

    所谓的模块就是将不同功能的函数分别放到不同的文件中,这样不仅有利于函数的维护,也方便了函数的调用.在Python中,一个.py文件就是一个模块(Module). 在模块的上层有一个叫做包(Packag ...