首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

extjs_02_grid显示本地数据、显示跨域数据

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一个基于jquery的图片切换效果
Jul 06 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
浅析vue深复制
Jan 29 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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
匹配(1) 索引树扫描(1) geoserver(1) 绝对定位(1) 相对定位(1) 逻辑备份(1) lua(3) 全表扫描(1) into outfile(1) sql模式(1)
You might like
php5中类的学习
2008/03/28 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
php发送post请求的三种方法
2014/02/11 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
nginx下安装php7+php5
2016/07/31 PHP
php 猴子摘桃的算法
2017/06/20 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
layDate插件设置开始和结束时间
2018/11/15 Javascript
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
在双python下设置python3为默认的方法
2018/10/31 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
python 命名规范知识点汇总
2020/02/14 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
异步传递消息系统的作用
2016/05/01 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
蓝颜请假条
2014/04/11 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
护士年终考核评语
2014/12/31 职场文书
小学科学教学计划
2015/01/21 职场文书
在校学生证明格式
2015/06/24 职场文书
初中语文教学研修日志
2015/11/13 职场文书