使用Ext.grid.Panel生成表格

使用Ext.grid.Panel生成表格

Ext.grid.Panel继承了Ext.panel.Panel，因此它的很多地方都类似于Ext.panel.Panel，但定义Ext.grid.Panel时必须指定如下两个选项。

• Ø store：该选项指定的Store对象负责为该表格提供数据。
• Ø columns：指定Ext.grid.column.Column数组或一个包含items属性（该属性值为Ext.grid.column.Column数组）的对象，该Ext.grid.column.Column数组指定Ext.grid.Panel生成的表格包含的所有列。

如下代码示范了如何使用Ext.grid.Panel来生成表格。

程序清单：codes\06\6.8\Ext.grid\Ext.grid.Panel.html

 

上面的示例创建了一个Ext.grid.Panel，这个Panel对象将会在页面上生成一个表格。定义该Ext.grid.Panel对象时指定了columns、store两个选项，其中columns选项指定该表格包含的数据列，以及各列所显示的数据；store选项指定一个Store对象，该Store负责提供该表格显示的数据。

在浏览器中浏览该页面，可以看到如图6.71所示效果。

 

图6.71　使用Ext.grid.Panel生成表格

从图6.71可以看出，使用Ext.grid.Panel生成的表格比普通HTML表格更美观，而且该表格默认可以对各列进行排序，并且可以自由控制各列的显示、隐藏。除此之外，Ext.grid.Panel生成表格的列默认允许通过拖动改变列宽、通过拖动改变列与列之间的排列顺序。

 

本文节选自

《疯狂Ajax讲义（第3版）》

李刚 编著

电子工业出版社出版