ExtJS课题-表格面板 (转)
日期：2014-05-16 浏览次数：20415 次
ExtJS专题-表格面板 (转)
ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。但很多人在应用的时候都会因为遇到一些细节问题而苦恼，为什么提示信息出不来呀？为什么s.gif图片在断网的情况下不能显示啊？为什么从后台得不到JSON数据啊？为什么日期的格式无法转换啊？为什么翻页就是报错啊？为什么拖曳功能就是实现不了啊？等等等等。最后归结到一句话，为什么ExtJS这么乱七八糟啊？！呵呵，为了帮助大家解决ExtJS的这些小麻烦，许老师做了下面的一个小DEMO来演示GridPanel的用法，后面有时间会陆陆续续演示其它组件的主要用法。我的愿望就是大家看了这个小专题之后，能够在最短的时间内掌握ExtJS的各种组件的应用。至于基本功的修炼，还得烦劳大伙自己用心。好啦，不多说，下面我们来看ExtJS中最实用的组件：表格面板。
表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义。这些都是基础知识，大家应该清楚了。我们主要要牢记，ExtJS里最主要的是JSON数据格式，ColumnModel是要显示表格的列的定义信息，而Store则是数据记录的来源。那么，数据呢，又可以分为本地数据和远程数据，它们分别使用不一样的代理；数据格式有Array，JSON，XML，针对每种数据格式ExtJS都有相应的解析方式，就是Store的读取器。我们最核心的当然是先掌握远程JSON数据的Store的用法。我们来看一个例子，这个例子包含了一般表格的常用功能，譬如按要求改变列的数据，右键菜单，面板折叠，强大的拖曳（drag/drop）以及分页处理。
这里涉及到三个文件,包括前台的grid.html,grid.js和后台的resJson.jsp，我们来分别瞧瞧：
（1） grid.html,这里要说明的是DOCTYPE不能设置错误，否则IE6.0会显示不出表头的列名。还有就是要汉化提示信息，注意导入ext-lang-zh_CN.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="resources/js/grid.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="myGrid"></div>
</body>
</html>
（2） grid.js,我们的主要功能就在这个JS里面,里面我都做了详细的注释，大家可以对照着学习。
Ext.onReady(function() {
Ext.QuickTips.init();// 浮动信息提示
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地
// 定义数据源为远程代理和JSON数据格式
var ds = new Ext.data.Store({
// proxy: new Ext.data.MemoryProxy(jsondata),
proxy : new Ext.data.HttpProxy({
url : 'resJson.jsp'
&nbs
ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。但很多人在应用的时候都会因为遇到一些细节问题而苦恼，为什么提示信息出不来呀？为什么s.gif图片在断网的情况下不能显示啊？为什么从后台得不到JSON数据啊？为什么日期的格式无法转换啊？为什么翻页就是报错啊？为什么拖曳功能就是实现不了啊？等等等等。最后归结到一句话，为什么ExtJS这么乱七八糟啊？！呵呵，为了帮助大家解决ExtJS的这些小麻烦，许老师做了下面的一个小DEMO来演示GridPanel的用法，后面有时间会陆陆续续演示其它组件的主要用法。我的愿望就是大家看了这个小专题之后，能够在最短的时间内掌握ExtJS的各种组件的应用。至于基本功的修炼，还得烦劳大伙自己用心。好啦，不多说，下面我们来看ExtJS中最实用的组件：表格面板。
表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义。这些都是基础知识，大家应该清楚了。我们主要要牢记，ExtJS里最主要的是JSON数据格式，ColumnModel是要显示表格的列的定义信息，而Store则是数据记录的来源。那么，数据呢，又可以分为本地数据和远程数据，它们分别使用不一样的代理；数据格式有Array，JSON，XML，针对每种数据格式ExtJS都有相应的解析方式，就是Store的读取器。我们最核心的当然是先掌握远程JSON数据的Store的用法。我们来看一个例子，这个例子包含了一般表格的常用功能，譬如按要求改变列的数据，右键菜单，面板折叠，强大的拖曳（drag/drop）以及分页处理。
这里涉及到三个文件,包括前台的grid.html,grid.js和后台的resJson.jsp，我们来分别瞧瞧：
（1） grid.html,这里要说明的是DOCTYPE不能设置错误，否则IE6.0会显示不出表头的列名。还有就是要汉化提示信息，注意导入ext-lang-zh_CN.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="resources/js/grid.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="myGrid"></div>
</body>
</html>
（2） grid.js,我们的主要功能就在这个JS里面,里面我都做了详细的注释，大家可以对照着学习。
Ext.onReady(function() {
Ext.QuickTips.init();// 浮动信息提示
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地
// 定义数据源为远程代理和JSON数据格式
var ds = new Ext.data.Store({
// proxy: new Ext.data.MemoryProxy(jsondata),
proxy : new Ext.data.HttpProxy({
url : 'resJson.jsp'
&nbs
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
