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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:43 PM

1.显示表格

http://img.blog.csdn.net/20140622133941015&#63;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>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7439

CakePHP 教程

1369

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

如何创建和发布自己的JavaScript库？ Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？ Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

如何使用浏览器开发人员工具有效调试JavaScript代码？ Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

jQuery矩阵效果 Mar 10, 2025 am 12:52 AM

将矩阵电影特效带入你的网页！这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效，只需选择一张图片，插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧，非常有趣！工作原理插件将图片加载到画布上，读取像素和颜色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域，并利用jQuery计算每个区域的平均颜色。然后，使用

如何构建简单的jQuery滑块 Mar 11, 2025 am 12:19 AM

本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库，它基于jQuery构建，并提供许多配置选项来设置轮播。如今，图片轮播已成为网站必备功能——一图胜千言！决定使用图片轮播后，下一个问题是如何创建它。首先，您需要收集高质量、高分辨率的图片。接下来，您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计，因此使用此库构建的轮播可以适应任何