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

更新时间：2014年06月23日 09:39:13 投稿：whsnow

这篇文章主要介绍了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>

ExtJS如何设置与获取radio控件的选取状态
radio控件的选取状态如何设置与获取，下面使用ExtJS来简单实现下，感兴趣的朋友可以参考下
2014-01-01
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
这篇文章主要介绍了Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法,本文中的事件指collapsebody和expandbody事件,需要的朋友可以参考下
2014-08-08
EXTjs4.0的store的findRecord的BUG演示代码
EXTjs4.0 的store的findRecord的BUG:当判断ID=1的时候，遇到1开头的ID的时候，这个时候就判断出问题了，有类似问题的朋友可以了解下哈
2013-06-06
ExtJs3.0中Store添加 baseParams 的Bug
今天发现了一个ExtJS3.0中的Bug 以前用2.0的时候，喜欢这样增加参数
2010-03-03
学习ExtJS table布局
ExtJS table布局使用说明，需要的朋友可以参考下。
2009-10-10
Extjs学习笔记之四工具栏和菜单
本文介绍在桌面程序开发中很常用也很简单的工具栏和菜单，但是在通常的web开发中，要实现好工具栏和菜单并非易事，然而extjs使我们能够用类似桌面程序开发的方法来开发web的工具栏和菜单。
2010-01-01
Extjs学习笔记之七布局
Panel内部的组件添加多了之后，组件如何排放就成了一个问题，Extjs的Layout就是为了解决这个问题的。其实学习Layout的最好地点就是Extjs的官网的例子
2010-01-01
Extjs学习笔记之八继承和事件基础
只有有了事件，页面才能真正的“活”起来。Extjs的事件也是经过良好封装的，对于事件的处理都由Ext.uitl.Observable类提供接口。
2010-01-01
Extjs3.0 checkboxGroup 动态添加item实现思路
Extjs3.0中的CheckboxGroup默认不能动态添加item,如需要数据动态创建，试着创建整个CheckboxGroup，而不是动态添加item，具体实现如下，感兴趣的朋友可以了解下
2013-08-08
extjs 学习笔记（二） Ext.Element类
上个系列中，我们用到了Ext.fly来获得一个Element对象，其实Ext.fly是Ext.Element.fly的简写形式。类似的方法还有一个Ext.get，是Ext.Element.get的简写。这两个方法都可以用使用Dom元素或者Dom元素的id作为参数来获得一个Element对象。
2009-10-10