Extjs教程grid显示编辑数据归纳.pdfVIP

使用 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 thesecategories. 可以创建自定义的 data store 来读取其他类型的数据。 Ext 论坛提供了一些用户 贡献的 data store ，例如 CSV和 ColdFusion 形式的数据。 在 data store 中添加数据： 初次尝试，我们将建立一个以本地数组为数据源的表格。接下来我们使用到的 数据来自一个小的电影数据库，其中包含了一些我最喜爱的电影，这与这章后面用到 的来自真实数据库的数据很相似。 The data store needs two things: the dat