资源描述：
《extjs&使用grid显示数据》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、使用grid显示数据（1）毫无疑问，grid是Ext中使用最广泛的组件之一。我们需要以一种易于理解的方式为最终用户展现我们的数据，电子表格就是这种方式之一，而且相当完美——应为它做到了，并且让这一观念深入人心。Ext接受了该观点，并使得它更加灵活而且奇妙。在这一章中我们会：·使用GridPanel来在用户友好的表格中展示结构化的数据；·从服务器或数据库加载数据显示在表格中；·使用表格提供的事件来控制表格的功能和显示；·在表格中采用高级的数据格式化技术；·建立分页表格。我们将说明如何定义表格的行和列，但是更为重要的是，我们将学习如何使表格更为美观
2、。我们可以添加自定义渲染的单元格，并且在其中添加图片，我们还可以根据数据值来改变显示样式。到底什么是表格？Ext的表格和电子表格相似，包含2个重要的部分：·行·列在这里，我们的列是：Title,Released,Genre,和Price。每一行包含像TheBigLebowski,SuperTroopers之类的电影。这些行都是我们的数据；表格中的每一行代表数据中的一条记录。在GridPanel中显示结构化的数据：在表格中显示数据需要两个Ext组件：·store——像数据库一样，追踪要显示的数据；·表格面板——提供展现store中数据的方式。在我
3、们开始来实现这些之前，让我们先来看看将被我们使用到的术语，因为这些术语可能会把我们搞糊涂：·Columns（列）：它引用整个数据列，包含显示数据有关的信息，包括列的head（列标题），在ExtJS中，这些都是ColumnModel（列模型）的一部分；·Fields（字段）：它也引用了真个数据列，但是它引用的是实际的数值。在ExtJS里，它被在reader（Ext读取数据的组件）中，用来加载数据。建立datastore（数据容器）：我们需要做的第一件事就是建立我们的数据，它将会被放到datastore之中。datastore有不同的类型，可以让我
4、们读取不同形式的数据（XML，JSON等等），并且可以在不同的Ext控件中来完成读取数据的过程。不管数据是JSON，XML还是数组，甚至是我们自己自定义的数据类型，我们都可以通过相同的方式访问，这要感谢datastore。下面是一些Ext中默认的datastore类型：·Simple(Array)（数组）·XML·JSONAcustomdatastorecouldbecreatedtoreaddatathatdoesnotfitintothesecategories.可以创建自定义的datastore来读取其他类型的数据。Ext论坛提供了一些用
5、户贡献的datastore，例如CSV和ColdFusion形式的数据。在datastore中添加数据：初次尝试，我们将建立一个以本地数组为数据源的表格。接下来我们使用到的数据来自一个小的电影数据库，其中包含了一些我最喜爱的电影，这与这章后面用到的来自真实数据库的数据很相似。Thedatastoreneedstwothings:thedataitself,andadescriptionofthedata—orwhatcouldbethoughtofasthefields.datastore需要两个东西：数据本身和数据描述——如同字段以及其它你能
6、想到的类似的东西。reader（读取器）读取器将被用来读取来自数组的数据，在其中我们会定义数组数据的字段名（field）。读取器相当于一个翻译，它将数据字符串翻译为一行一行的数据来供Ext使用。接下来的代码应该被放到Ext的OnReady函数内部：varstore=newExt.data.Store({data:[[1,"OfficeSpace","MikeJudge","1999-02-19",1,"WorkSucks","19.95",1],[3,"SuperTroopers","JayChandrasekhar","2002-02-15"
7、,1,"AlteredStatePolice","14.95",1]//...morerowsofdataremovedforreadability...//],reader:newExt.data.ArrayReader({id:'id'},['id','title','director',{name:'released',type:'date',dateFormat:'Y-m-d'},'genre','tagline','price','available']});如果我们在浏览器中查看这段代码，我们不会看到任何东西——因为datastor
8、e只是用来加载并跟踪数据的一种方式。现在浏览器的内存中已经有我们的数据了。现在我们只需要决定怎样将它显示给用户。为datastore定义数据：read
