extjs使用grid显示数据.docVIP

使用grid显示数据（1） 毫无疑问，grid是Ext中使用最广泛的组件之一。我们需要以一种易于理解的方式为最终用户展现我们的数据，电子表格就是这种方式之一，而且相当完美——应为它做到了，并且让这一观念深入人心。Ext 接受了该观点，并使得它更加灵活而且奇妙。 在这一章中我们会： 使用GridPanel来在用户友好的表格中展示结构化的数据； 从服务器或数据库加载数据显示在表格中； 使用表格提供的事件来控制表格的功能和显示； 在表格中采用高级的数据格式化技术； 建立分页表格。 我们将说明如何定义表格的行和列，但是更为重要的是，我们将学习如何使表格更为美观。我们可以添加自定义渲染的单元格，并且在其中添加图片，我们还可以根据数据值来改变显示样式。 到底什么是表格？ Ext的表格和电子表格相似，包含2个重要的部分： 行 列 在这里，我们的列是：Title, Released, Genre, 和 Price。每一行包含像The Big Lebowski, Super Troopers之类的电影。这些行都是我们的数据；表格中的每一行代表数据中的一条记录。 在GridPanel中显示结构化的数据： 在表格中显示数据需要两个Ext组件： store——像数据库一样，追踪要显示的数据； 表格面板——提供展现store中数据的方式。 在我们开始来实现这些之前，让我们先来看看将被我们使用到的术语，因为这些术语可能会把我们搞糊涂： Columns（列）：它引用整个数据列，包含显示数据有关的信息，包括列的head（列标题），在ExtJS中，这些都是Column Model（列模型）的一部分； Fields（字段）：它也引用了真个数据列，但是它引用的是实际的数值。在ExtJS里，它被在reader（Ext读取数据的组件）中，用来加载数据。 建立data store（数据容器）： 我们需要做的第一件事就是建立我们的数据，它将会被放到data store之中。data store有不同的类型，可以让我们读取不同形式的数据（XML，JSON等等），并且可以在不同的Ext控件中来完成读取数据的过程。不管数据是JSON，XML还是数组，甚至是我们自己自定义的数据类型，我们都可以通过相同的方式访问，这要感谢data store。 下面是一些Ext中默认的data store类型： Simple (Array)（数组） XML JSON A custom data store could be created to read data that does not fit into these categories. 可以创建自定义的data store来读取其他类型的数据。Ext论坛提供了一些用户贡献的data store，例如CSV和ColdFusion形式的数据。 在data store中添加数据： 初次尝试，我们将建立一个以本地数组为数据源的表格。接下来我们使用到的数据来自一个小的电影数据库，其中包含了一些我最喜爱的电影，这与这章后面用到的来自真实数据库的数据很相似。 The data store needs two things: the data itself, and a description of the data—or what could be thought of as the fields. data store需要两个东西：数据本身和数据描述——如同字段以及其它你能想到的类似的东西。 reader（读取器）读取器将被用来读取来自数组的数据，在其中我们会定义数组数据的字段名（field）。读取器相当于一个翻译，它将数据字符串翻译为一行一行的数据来供Ext使用。 接下来的代码应该被放到Ext的OnReady函数内部： var store = new Ext.data.Store({ data: [ [ 1, Office Space, Mike Judge, 1999-02-19, 1, Work Sucks, 19.95, 1 ],[ 3, Super Troopers, Jay Chandrasekhar, 2002-02-15, 1, Altered State Police, 14.95, 1 ] //...more rows of data removed for readability...// ], reader: new Ext.data.ArrayReader({id:id}, [ id, title, director, {name: relea