ExtJS 2.0 GridPanel基本表格简明教程

编辑：rootadmin

ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。我们首先来看最简单的使用表格的代码：执行上面的代码，可以得到一个简单的表格，如下图所示：上面的代码中，第一行“var data=…”用来定义表格中要显示的数据，这是一个[][]二维数组；第二行“var store=…”用来创建一个数据存储，这是GridPanel需要使用配置属性，数据存储器Store负责把各种各样的数据（如二维数组、JSon对象数组、xml文本）等转换成ExtJS的数据记录集Record，关于数据存储器Store我们将在下一章中作专门介绍。第三行“var grid = new Ext.grid.GridPanel(…)”负责创建一个表格，表格包含的列由columns配置属性来描述，columns是一数组，每一行数据元素描述表格的一列信息，表格的列信息包含列头显示文本(header)、列对应的记录集字段(dataIndex)、列是否可排序(sorable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等，在上面的列子中只用到了header及dataIndex。下面我们看简单看看表格的排序及隐藏列特性，简单修改一下上面的代码，内容如下：直接使用new Ext.grid.ColumnModel来创建表格的列信定义信息，在“项目名称“及“开发团队”列中我们添加了sortable为true的属性，表示该列可以排序，执行上面的代码，我们可以得到一个支持按“项目名称“或“开发团队”的表格，如图xxx所示。 (按项目名称排序) (可排序的列表头后面小按钮可以弹出操作菜单) (可以指定隐藏哪些列) 另外，每一列的数据渲染方式还可以自己定义，比如上面的表格中，我们希望用户在表格中点击网址则直接打开这些开源团队的网站，也就是需要给网址这一列添加上超级连接。下面的代码实现这个功能：也就是说数据变成了一维数组，数组中的每一个元素是一个对象，这些对象包含name、organization、homepage、id等属性。要让表格显示上面的数据，其实非常简单，只需要把store改成用Ext.data.JsonStore即可，代码如下：上面的代码得到的结果与前面的一样。当然，表格同样能显示xml格式的数据，假如上面的数据存放成hello.xml文件中，内容如下：为了把这个xml数据用ExtJS的表格Grid进行显示，我们只需要把store部分的内容调整成如下的内容即可：其它的部分不用改变，完整的代码如下： store.laod()是用来加载数据，执行上面的代码产生的表格与前面的完全一样。

推荐整理分享ExtJS 2.0 GridPanel基本表格简明教程，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

Extjs中常用表单介绍与应用目标:知道表单面板如何创建了解表单面板中xtype的类型的应用知道表单面板如何验证，绑定，取值综合应用表单面板（玩转它）内容:首先我们要理解的

ExtJS PropertyGrid中使用Combobox选择值问题问题描述：在PropertyGrid中使用Combobox来选择值时，得到的应该是displayField的值，但是在确认选择的时候却显示了valueField的值，例如，下拉选择性别，displ

ExtJS 设置级联菜单的默认值前言ExtJS在修改这样的页面上赋值是很方便的，在正文中1.2.1代码中可以看出，一行代码就可以搞定，但这是对于普通控件而言，如文本框。对于ComboBox