掌握 Dojo 工具包，第 8 部分: 明日之星 - DojoX

核心提示： 这里，我们从新定义了 layout，掌握 Dojo 工具包，第 8 部分: 明日之星 - DojoX(8)，将 layout 分为两个子行，其中子行 1 包含了五个字段，这两个属性的用法与 html 中的用法一致，并且可以在 html 定义表结构中使用，其中 pro_no、pro、avg_amo

这里，我们从新定义了 layout，将 layout 分为两个子行，其中子行 1 包含了五个字段，其中 pro_no、pro、avg_amount、range 具有值为 2 的 rowSpan 属性，也就表明这三列跨越了两行。第二行仅有 max_amount 一个字段。同时，我们为三个 amount 字段指定了 formatter 函数，在其数值前添加美元符号。为 range 字段指定了 get 方法来自动获取最大值与最小值的差。

显示效果如下：

图 4. DataGrid 布局示例 1

除了 rowSpan 属性外我们还可以使用 colSpan 属性，这两个属性的用法与 html 中的用法一致，并且可以在 html 定义表结构中使用，我们再看这个表头的例子来理解一下 colSpan 的用法。

清单 9. colSpan 的应用
　var　structure　=　[[　
　{field:　'type',　name:　'Type',　rowSpan:　2},　
　{field:　'pro',　name:　'Product',　rowSpan:　2},　
　{field:　'Q20071',　name:　'Q1',formatter:　formatAmount　},　
　{field:　'Q20072',　name:　'Q2',formatter:　formatAmount　},　
　{field:　'Q20073',　name:　'Q3',formatter:　formatAmount　},　
　{field:　'Q20074',　name:　'Q4',formatter:　formatAmount　}　
　],[　
　{field:　'Y2007',　name:　'Year　2007',formatter:　formatAmount,　colSpan:　4　}　
　]];　

清单 9的显示效果如下：

图 5. DataGrid 布局示例 2