extjs_02_grid(显示本地数据，显示跨域数据)
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(显示本地数据，显示跨域数据)的更多相关文章
- JSONP -- 跨域数据交互协议
一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...
- ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝 ...
- ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...
- iframe跨域数据传递
项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递: 域名A下的页面 ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...
- Vue.js——基于$.ajax实现数据的跨域增删查改
转自:https://www.cnblogs.com/keepfool/p/5648674.html 概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是loc ...
- JSONP跨域数据调用
引自:http://kb.cnblogs.com/page/139725/ Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如& ...
- JSONP(跨域请求) —— 一种非官方跨域数据交互协议
1.JSONP的作用 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,为 了实现跨域请求,可以通过script标签实现跨域请求,然后再服务器端输出JSON数 ...
- html5跨域数据传递（postMessage）
在html5中有个支持跨域传递的方法postMessage,可是实现iframe之间的数据传递! 代码如下:数据发送页面 <!DOCTYPE HTML> <html lang=&qu ...
随机推荐
- Discuz!X3.1 全新安装图文教程
http://www.discuz.net/thread-3456887-1-1.html
- ANDROID_MARS学习笔记_S05_004_过滤杂质，得到真正的加速度
一.简介 二.代码1.java (1)MainActivity.java import android.app.Activity; import android.content.Context; im ...
- 【HDOJ】1031 Design T-Shirt
qsort直接排序. #include <stdio.h> #include <string.h> #include <stdlib.h> #define MAXN ...
- ORA-65096: invalid common user or role name
CREATE USER xx IDENTIFIED BY yy DEFAULT TABLESPACE USERS TEMPORARY TABLESPACE TEMP PROFILE "DEF ...
- suse系统FTP问题
1.修改FTP端口问题 在 这个配置文件中vi /etc/vsftpd.conf 添加 Listen_port=34 vi /etc/services ftp 21/tcp # F ...
- Nido.Common.Utilities.MD5类
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Sec ...
- HDOJ/HDU 2087 剪花布条(indexOf()应用~~)
Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input 输入 ...
- JAVA vo pojo javabean dto的区别
JavaBean 是一种JAVA语言写成的可重用组件.为写成JavaBean,类必须是具体的和公共的,并且具有无参数的构造器.JavaBean 通过提供符合一致性设计模式的公共方法将内部域暴露成员属性 ...
- poj 1556 The Doors（线段相交，最短路）
The Doors Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7430 Accepted: 2915 Descr ...
- JavaScript高级程序设计24.pdf
Element类型 Element类型用于表现XML或HTML元素,提供对元素标签名.子节点及特性的访问,它具有以下特征 nodeType的值为1: nodeName的值为元素的标签名: nodeVa ...