独门架构java web开发应用详解.pdfVIP

第 20 章 表格组件 本章将介绍ExtJS 中的表格组件。表格组件是ExtJS 中的一个重要组件，表格组件提供了丰 富的功能，并且可以通过很简单的方式调用这些功能。通过本章的学习，读者可以充分掌握表 格组件的使用方法。 20.1 表 格 基 础 ExtJS 中的表格组件的功能非常强大。通过该组件可以实现各种复杂的功能，例如，排序、 拖动、隐藏某一列、自动显示行号和复选框、分组和装载 XML 数据等功能。本节将介绍表格 组件的基本方法。 20.1.1 编写第一个表格程序 在很多地方都会看到表格，由于表格是二维的，因此，就需要设置表格的行数和列数， 然后设置每一个单元格的数据。 在 ExtJS 中的表格由 Ext.grid.ColumnM 类来描述列属性。列的属性由列名和列索引组 成。下面先来建立一个 ColumnM 对象，并设置 3 个列的属性值： var cm=new Ext.grid.ColumnMvar cm=new Ext.grid.ColumnMvar cm=new Ext.grid.ColumnM ([([([ {header:'书名',dataIndex:'book_name'}, {header:'作者',dataIndex:'author'}, {header:'类别',dataIndex:'category'} ]); 从上面的代码可知，ColumnM 类的构造方法需要一个数组来描述列信息。每一个元素 是一个对象，该对象有 header 和 dataIndex 两个属性，分别表示列名称和列索引。该索引非常 重要，在后面建立的 Store 对象要利用这个索引将数据与相应的列进行对应。 现在表格的结构已经确定了，下面现在表格的结构已经确定了，下面 需要定义表格中的数据。当然，为了方便起见，在需要定义表格中的数据。当然，为了方便起见，在 本例中直接使用 JavaScript 数组来描述表格中的数据。在后面 可以看出表格还可以装载 数组来描述表格中的数据。在后面 可以看出表格还可以装载 JSON 和 XML 格式的数据，并且可以从网络上获得这些数据。定义表格数据的 JavaScript 代码 如下： 第 20 章 表格组件 var data=[ ['Java Web 开发速学宝典',' ','Web'], ['Android/OPhone 开发完全讲义',' ','移动'], ['Thinking in Java','Bruce Eckel','Java'], ['Thinking in C++','Bruce Eckel','C++'], ]; 在上面的代码中使用了二维数组来定义表格中的数据。从这个数组可以看出，第一维的每 个元素正好有 3 个值，这 3 个值会与前面定义的表格的 3 个列相对应。下面要做的是创建一个 Ext.data.Store 对象，将 data 数组中的数据装载到 Store 对象中，形式像 集的格式一样。创 建 Store 对象的代码如下： var store=new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data), reader:new Ext.data.ArrayReader({},[ {name:'book_name'}, {name:'author'}, {name:'category'} ]) }); store.load(); 其中 proxy 属性表示一个 类对象，在这里是 MemoryProxy 对象，该对象可以封装