ExtJS4图文实例之数据组件的简单应用.docVIP

ExtJS4.0图文实例——数据组件介绍及简单应用 前言： 我们学习ExtJS主要就是用在做一些系统用，而在我们的系统，说的简单些，就是对数据的处理，包括定义以及增、删、改、查等一些操作。所以数据才是我们学习的核心。如果有用过ExtJS之前版本的，可能在4.0里面不怎么适用了，因为4.0对于面向对象是一个比较牛的升级，如果你百度一下ExtJS4的话，你会发现某些搜索结果会和MVC掺和在一起。常用到诸如：Model，Proxy，Store等概念。所以我们在学的时候呢，尽量不要和以前对比，如果学过Java或者C#,理解起来会比较容易些，现在为了举个简单的例子，这里给出一个如下图的数据库表。 这是取经西天四人组的某次考试成绩单，如果是用C#，按照MVC的理解，我们需要先定义一个成绩单的实体类。那么在ExtJS4里面也是如此。不过呢，他不叫做类，而是叫做Model，Model的定义也有很特别的方式，如下： 这种定义方式呢，每次都要说明继承自Model类，有些麻烦，毕竟我们本来就是去定义Model了，为此呢，ExtJS提供了另外一个定义方式，regModel方法，翻译过来是去注册一个Model，这样就不用脱裤子放屁了，定义方法如下： 为了更容易理解，下面的类不做特殊说明就相当于Model，当然在C#我们可以定义属性，在Java里面我们可以定义，Setter ，Getter，在ExtJS4里面同样可以定义这些，那么今天我们主要就是让大家认识一下，一步一步来，实例也是实现了显示，所以，这里我们先不做其他配置属性的设置了。 数据类有了，下面我们先现在根据这个格式来声明一些数据，就好像我们有一张表格需要填写，正在按照表格往上面填写数据一样。 根据我们数据库里面的内容，我们声明了上面的数据。看过了上面的数据，有些朋友不免疑问，我们定义的类，是可以通过Ext.create()方法来实例化，但那样实例化只能实例化一个对象，一个数据记录，为此呢，我们需要一个集合，这里也就出现了另外一个概念Store。Store 是一个数据集的概念。一个集合，可以理解为DataSet或者是ResultSet，那么我们都知道如果我们要取数据，不管是C#还是Java，都有一个适配器为我们做运输，如SqlDataAdapter，ExtJS4里面同样也就这个角色，叫做Proxy。记得当初学ADO.NET时，为了形象的理解，我们把数据当做仓库，而我们要去仓库取数据时不是我们去，而是找来一辆车子（Adapter）帮我们去取，这里Proxy做的就是这个工作，他指定了我们要去那里取数据，或者对数据的操作是什么（CRUD大家都不陌生吧）。比如我们这里要去刚刚定义了数据data那么显然这段代码会为我们在内存中声明一块空间存下该数据，如果我们使用该数据，就要指定该数据的目的地就在内存中。为了便于理解，我们先看下ExtJS在这里的帮助文档，如下图： 从这里不难看出，Proxy有很多种，客户端的，服务器端的，从内存中也单独有个，叫做Memory，这就好像我们读数据库一样，如果我们用Sqlserver，就用的是SqlDataAdapter,如果我们使用的是Oracle，那么就是QracleDataAdapter类似，针对不同的目的地，我们用不同的“车”。还有一个问题大家可以注意的到，这辆“车”，不但运送着我们的数据，同样，也带着我们的命令，就想是在SqlDataAdapter里面的Command是一个道理，在我们这个实例里面，我们要做的就是简简单单的读，于是从API帮助文档中，我们很明显能够看到一个reader，这就是我们这个“车”要传达的命令。 通过上面的一坨废话呢，我们引出来了这样几个概念，Store，Proxy，Reader，在真正理解了他们的关系之后，剩下的代码也就不成问题了，如下： 到目前为止，我们的数据方面的工作算是完成了，那么，如果我们想在网页上用Grid显示出来咋办呢，接下来就是见证实际的 时刻！ 首先我们来介绍一下Grid, 在这里呢，我们已经用红色线框分别标了出表格标题栏部分，列标题部分，还有数据部分，如果需要分页之类的，我们还可以看到有下部工具栏的表格，在这里呢，我们先用这三个部分，表格标题由一个字符串给出即可，那数据可以由我们的Store来提供，剩下的就是列标题的定义，对于列标题，他的标题文字，标题宽度，列文字的排列该如何处理，都在这里定义，如下： 上面的定义给出了，头文字，列宽，以及数据绑定的索引（这个很关键，这是数据与表格列绑定的标识，注意他的大小写，与Jason数据的关系，他们是一样的），文字排列等等， 接下来我们就可以直接定义我们的Grid了，如下： 最后我们将代码完全来一遍，就以看到数据的显示了，完整代码如下： MyJS.JS //通过Ext.define(str