这篇文章主要介绍了extjs_02_grid显示本地数据、显示跨域数据的具体实现,需要的朋友可以参考下

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.显示本地数据

<%@ 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>
最新资讯
美司法部控告六人涉嫌贿赂亚马逊员工以获得市场优势

美司法部控告六人涉嫌

据报道,美国司法部周五指控六人参与贿赂亚马逊员工和承
最新发现的一次大灭绝事件

最新发现的一次大灭绝

2.33亿年前,地球成为“炼狱”。在我们现在所知的加拿大
拯救替罪羊,科学能帮到我们什么?

拯救替罪羊,科学能帮到

被错误指控的人,即使最终能洗脱罪名,通常也需要多年的等
恒大汽车要登陆科创板:汽车尚未卖一辆 已聚集了许家印马云马化腾

恒大汽车要登陆科创板

恒大汽车董事会宣布决议,拟发行人民币股份于上交所科创
才貌双全的清华女神教授,2020年又拿奖,却说只想“任性”地活

才貌双全的清华女神教

距颜宁2017年辞去清华大学教授,已经过去了三年。看起来
爱立信同意11亿美元收购美5G方案商Cradlepoint

爱立信同意11亿美元收

瑞典电信设备制造商爱立信表示,它已同意以11亿美元的价
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,