磨刀不误砍柴工：Ext4核心组件Grid的变化及学习（2）：数据列的基本操作

今天讨论数据列的操作。

通常情况下（如上一篇的例子，不进行特殊设置），每个数据列都支持数据排序，单击数据列header会在ASC和DESC之间切换；数据列header可以拖动前后顺序；数据列可以设置显示或者隐藏。每个数据列还有dropdown菜单，如下：

我们改变一下原始例子的columns参数看看：

Ext.create( ' Ext.grid.Panel ' , { title: ' Simpsons ' , store: new simpsonsStore, columns: [ { header: ' Name ' , dataIndex: ' name ' , sortable: false , hideable: false , flex: 1 }, { header: ' Email ' , dataIndex: ' email ' , hidden: true }, { header: ' Phone ' , dataIndex: ' phone ' , width: 100 }], height: 200 , width: 800 , renderTo: Ext.getBody() });

效果如下图所示：

下面分别说明：

1、该列是否排序 sortable: false，这个很明显，不多说。

2、该列是否能够隐藏 hideable: false。

3、该列是否隐藏 hidden: true，注意隐藏后还可以通过其他列的dropdown菜单显示出来，如下：

4、设置列宽，这个重点讨论一下：

a）grid的column的layout是Ext.layout.container.HBox，所以列宽可以通过width或者flex设置，如果不进行任何设置，列宽为100px

b）设置width，可以指定列宽

c）设置flex，这个属性是从Ext.layout.container.HBox继承的，grid渲染的时候首先分配设置了width属性的列宽度，然后凡是设置了flex的列（除去flex = 0 或者 flex = undefined）瓜分剩余列宽，分配的比例按照（本列flex/全部列flex的和）来计算。例如：

Ext.create( ' Ext.grid.Panel ' , { title: ' Simpsons ' , store: new simpsonsStore, columns: [ { header: ' Name ' , dataIndex: ' name ' , sortable: false , hideable: false , flex: 2 }, { header: ' Email ' , dataIndex: ' email ' , flex: 5 }, { header: ' Phone ' , dataIndex: ' phone ' , width: 100 }], height: 200 , width: 800 , renderTo: Ext.getBody() });

 

效果如下：

 

整个gridwidth为800px，首先分配Phone列，100px，还剩余700px，Name的flex为2，Email的flex为5，所以各分配了（2/(2+5)）=200px和（5/(2+5)）=500px

d）Grouped Header的列宽是由子列确定的，不用设置：

5、自定义单元格显示模板（重要）

通过设置renderer属性可以自定义单元格显示，renderer是一个拦截器，可以指定为一个函数，函数的返回值为显示的html字符串，接收的参数顺序为：

  * @param {Mixed} value The data value for the current cell
     * @param {Object} metaData A collection of metadata about the current cell; can be used or modified by
     * the renderer. Recognized properties are: tdCls, tdAttr, and style.
     * @param {Ext.data.Model} record The record for the current row
     * @param {Number} rowIndex The index of the current row
     * @param {Number} colIndex The index of the current column
     * @param {Ext.data.Store} store The data store
     * @param {Ext.view.View} view The current view

最常使用的参数为1号和3号，1号接收单元格的value，3号接收单元格所在行的record，示例如下（以上面代码为基础修改）：

{ header: ' Email ' , dataIndex: ' email ' , flex: 5 , renderer: function (value) { return Ext.String.format( ' {1} ' , value, value); }}

效果：

示例2（同时使用行数据）：

{ header: ' Email ' , dataIndex: ' email ' , flex: 5 , renderer: function (value, o, record) { return Ext.String.format( ' {2}要写mail到 {1} ' , value, value, record.get( ' name ' )); }}

效果：

其他参数如行号列号比较容易使用，不一一赘述。

基本列使用方式就是这样，下一节会将grid的选择模式。