去年10-28号，我发布了一篇文章《海王星给你好看！FineUI v4.0公测版发布暨《你找BUG我送书》活动开始》，标志着FineUI开始向4.0版本迈进。经过4个月3个公测版的锤炼，今天我高兴的宣布FineUI v4.0正式版发布了！
查看版本更新日志：http://fineui.com/version/
主要改动点
DropDownList默认可以为空
最大好处是方便使用Required属性做客户端验证，见下图：
FineUI v4 对必填项 - 审批人 - 的处理更加合理，实际效果更加好。
表格的 EnableRowNumber 属性变成了一个真正的列
在FineUI v3 中，页面代码如下：
<x:Grid ID="Grid1" Title="表格" Width="800px" PageSize="10" ShowBorder="true" ShowHeader="true"
AutoHeight="true" AllowPaging="true" runat="server" EnableCheckBoxSelect="True"
DataKeyNames="Id" IsDatabasePaging="true" OnPageIndexChange="Grid1_PageIndexChange"
EnableRowNumber="True" EnableRowNumberPaging="true" RowNumberWidth="24px">
<Columns>
<x:BoundField Width="150px" DataField="Id" HeaderText="ID" />
<x:BoundField ExpandUnusedSpace="true" DataField="EntranceTime" HeaderText="时间" />
</Columns>
</x:Grid>
在FineUI v4 中，我们需要指定第一列为 RowNumberField，同时可以通过Width来指定列的宽度：
<x:Grid ID="Grid1" Title="表格" EnableFrame="true" EnableCollapse="true" Width="800px"
PageSize="10" ShowBorder="true" ShowHeader="true"
AllowPaging="true" runat="server" EnableCheckBoxSelect="True"
DataKeyNames="Id" IsDatabasePaging="true" OnPageIndexChange="Grid1_PageIndexChange">
<Columns>
<x:RowNumberField EnablePagingNumber="true" Width="30px" />
<x:BoundField Width="150px" DataField="Id" HeaderText="ID" />
<x:BoundField ExpandUnusedSpace="true" DataField="EntranceTime" HeaderText="时间" />
</Columns>
</x:Grid>
分组表头标签重定义
FineUI v3 中的分组表头有一些限制，比如大家最常问到的如何实现分组表头的合并。在FineUI v4中可以轻松实现：
表格的 SortColumnIndex 属性被 SortField 属性替代
表格的 SortField 和 列的 SortField 相对应，在 ASPX 页面需要把 SortColumnIndex 去掉。
同时还要注意后台排序事件同样使用表格的 SortField 属性：
protected void Grid1_Sort(object sender, FineUI.GridSortEventArgs e)
{
Grid1.SortDirection = e.SortDirection;
Grid1.SortField = e.SortField; BindGrid();
}
删除树节点的 SingleClickExpand 属性
由于extjs v4.2不再支持此属性，我们通过变通的方法，为树控件增加 EnableSingleClickExpand 属性，来达到类似的效果。
客户端脚本的改变
函数onReady更改为F.ready(fn)
函数onAjaxReady更改为F.ajaxReady(fn)
函数X.util.beforeAjaxPostBackScript更改为F.beforeAjax(fn)
这样做的好处是可以多次注册事件，而多次注册的事件会按照顺序执行。这是FineUI v3.0所不支持的。
表格合计行的支持
表格合计行在 FineUI v4.0中默认支持，可以通过 SummaryPosition 属性来控制合计行的显示问题。而在 FineUI v3.0中则要写自定义JS来完成。
后台设置合计行数据也很简单，只需要设置 SummaryData 属性即可：
private void OutputSummaryData()
{
DataTable source = GetDataTable2(); float donateTotal = 0.0f;
float feeTotal = 0.0f;
foreach (DataRow row in source.Rows)
{
donateTotal += Convert.ToInt32(row["Donate"]);
feeTotal += Convert.ToInt32(row["Fee"]);
} JObject summary = new JObject();
summary.Add("major", "全部合计");
summary.Add("fee", feeTotal.ToString("F2"));
summary.Add("donate", donateTotal.ToString("F2")); Grid1.SummaryData = summary; }
通过简单的JS添加工具图标和菜单
这个效果虽然没有默认的控件支持，但只需一段JavaScript代码即可搞定：
// 添加工具图标，并在点击时显示上下文菜单
leftRegion.addTool({
type: 'gear',
tooltip: '系统设置',
regionTool: true,
handler: function (event, toolEl, panelHeader) {
menuSettings.showBy(this);
}
});
表格右键菜单
通过组合 Menu 服务器控件和一段简单的JavaScript代码，即可实现上述效果：
F(gridID).on('beforeitemcontextmenu', function (view, record, item, index, event) {
F(menuID).showAt(event.getXY());
event.stopEvent();
});<f:Menu id="Menu1" runat="server">
<f:MenuButton ID="btnSelectRows" EnablePostBack="false" runat="server" Text="全选行">
</f:MenuButton>
<f:MenuButton ID="btnUnselectRows" EnablePostBack="false" runat="server" Text="取消行">
</f:MenuButton>
</f:Menu>
海王星主题
海王星主题是 FineUI v4.0 最大的改变，现在就到官方示例一探究竟：http://fineui.com/demo/
《FineUI3to4一键升级工具》
由于 FineUI v4 和 FineUI v3.x 差异很大，有很多不兼容的地方，因此我们提供了一键升级工具供大家使用。
《FineUI3to4一键升级工具》专供邮件订阅用户，如果您还未订阅 FineUI 官方网站，请点击如下链接订阅：
http://list.qq.com/cgi-bin/qf_invite?id=79abf8372c76e63b0d88931760427245dbfee6a461c0bb1a
使用《FineUI3to4一键升级工具》来升级官方示例，总共进行了 500 多次规则替换，从而大大减轻了手工升级的工作量，参看如下升级日志：
推荐本文
你的鼓励是我们前进的动力，请通过如下三种方式鼓励作者：
1. 关注博客
2. 推荐本文
3. 发表评论