FineUIPro 升级指南

升级其实很简单，仅支持从 FineUI v4.2+ 升级！

FineUIPro 升级到新版本

升级需谨慎，请预留充分的测试时间！

只需要如下 2 个步骤：

  1. 替换 DLL 并重新编译，然后对所有的功能进行测试！
  2. 从新版本的官网示例源代码中，拷贝如下目录到你的项目中：FineUIPro.Examples\res\themes。

其实第 2 步也很容易理解，FineUIPro.Examples\res\themes 里面存放的都是自定义主题，而自定义主题可能会随着新版本发布而改变。

开源版升级到 FineUIPro

升级需谨慎，请预留充分的测试时间！

  • 仅支持从 FineUI v4.2+ 升级！
  • jQuery引用 全部 删除（FineUIPro 已经包含最新的jQuery引用）；
  • 第三方和用户自定义脚本 全部 放在 </form> 标签的后面；
  • Window、Menu、HiddenField 控件 全部 放到 </form> 标签的前面，不要放到任何控件中；
  • 使用 Visual Studio 的 Nuget 管理器下载最新的 Newtonsoft.Json 库；
  • 更多 FineUI 相关的常见问题 ；

经过上面的几部操作，你已经完成了 95% 的升级工作，接下来就要进行详细的测试！

常见问题的解决办法：

  1. 1. 仅支持从 FineUI v4.2+ 升级！

    如果你的项目基于 FineUI 的版本低于 v4.2，请先升级到开源版的最高版本，然后再升级到 FineUIPro。

  2. 2. JavaScript 错误：'_updateDatepicker' undefined（删除所有jQuery引用）

    由于 FineUIPro 中已经包含了最新的 jQuery 引用，因此你需要在整个项目中查找并删除 jQuery 引用，重复加载 jQuery 会导致未知的错误。

  3. 3. HTML5 文档类型

    如果项目中页面有类似如下的头部定义：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    请统一替换为 HTML5 文档类型：

    <!DOCTYPE html>
<html>
<head>
  4. 4. res.axd?js=f_all.js 404 (Not Found)
    1. 首先确保 Web.config 中正确配置了 httpHandlers，类似： 
      <httpHandlers>
  <add verb="GET" path="res.axd" type="FineUIPro.ResourceHandler, FineUIPro" validate="false" />
</httpHandlers>
    2. 如果使用了 Forms Authentication，还要添加 res.axd 的例外项，类似： 
      <location path="res.axd">
	<system.web>
	  <authorization>
		<allow users="*" />
	  </authorization>
	</system.web>
</location>

    更加详细的配置参数，请参考 文档 或者示例项目。

  5. 5. HtmlEditor 不显示

    FineUIPro 的富文本编辑器可以在 UMEditor、UEditor、CKEditor、TinyMCE 中间选择，通过控件属性 Editor、BasePath 来进行切换，详见 示例 。

  6. 6. Nuget 程序包还原失败：找不到...的程序包 FineUIPro

    由于开源版是从 NuGet 下载的 FineUI.dll，而 FineUIPro 需要自行引用 FineUIPro.dll，所以需要从项目根目录的 packages.config 文件中删除 FineUIPro 项。

  7. 7. 未找到请求的值 Neptune

    在将“Neptune”字符串转换为 Theme 枚举类型时发生了错误，由于 FineUIPro 中已经不包含 Neptune 主题，因此你可能需要在代码层面进行保护，类似： 

    try
{
	string themeValue = themeCookie.Value;
	pm.Theme = (Theme)Enum.Parse(typeof(Theme), themeValue, true);
}
catch (Exception)
{
	pm.Theme = FineUIPro.Theme.Default;
}
  8. 8. 所有图标丢失

    1. 确保项目的请求和响应都是 UTF-8 编码，在 Web.config 中，你可能需要添加：

    <globalization requestEncoding="utf-8" responseEncoding="utf-8" fileEncoding="utf-8"/>

    2. 确保 icon 目录位于 res 目录下面。

  9. 9. 树节点图标丢失

    在代码和页面查找 EnableIcons 属性，将其设为 true。

  10. 10. JavaScript 错误：object/i is not a function

    检查页面的自定义 JavaScript 是否存在如下代码：

    leftRegion.addTool({
	type: 'gear',
	tooltip: '系统设置',
	regionTool: true,
	handler: function (event, toolEl, panelHeader) {
		// ....
	}
});

    如果存在，请改为：

    leftRegion.addTool({
	iconFont: 'gear',
	tooltip: '系统设置',
	handler: function () {
		// ....
	}
});
  11. 11. 自定义脚本更新列表（JavaScript）

    由于 FineUIPro 完全抛弃了 extjs 库，因此如果你在项目中使用了自定义脚本，则有很多需要更新的地方，这里也仅仅列出了一小部分。

    1. 表格不存在 getStore, getSelectionModel, getPlugin, getView 等方法

      在项目中查找所有的 getStore 字符串，这些地方都需要你手工一个一个的更新。比如之前用来展开全部扩展列的客户端脚本是：

      function expandAllRows() {
	var grid = F(gridClientID);
	var store = grid.getStore();
	var expander = grid.getPlugin(gridClientID + '_rowexpander');
	for (var i = 0, count = store.getCount() ; i < count; i++) {
		var record = store.getAt(i);
		expander.toggleRow(i, record);
	}
}

      FineUIPro 中需要改为：

      function expandAllRows() {
	F(gridClientID).expandRowExpanders();
}
    2. 查找所有的 .x-grid-row 替换为 .f-grid-row

      CSS 类名的前缀全部由 x 改为 f，类似的改动还有：

      • .x-grid-cell -> .f-grid-cell
      • .x-grid-row-selected -> .f-grid-row-selected
      • .x-grid-row-summary -> .f-grid-row-summary
      • .x-panel-body -> .f-panel-body
    3. 表格行的右键菜单事件名称由 beforeitemcontextmenu 改为 beforerowcontextmenu

      开源版中弹出表格右键菜单的代码为：

      F(gridID).on('beforeitemcontextmenu', function (view, record, item, index, event) {
	F(menuID).showAt(event.getXY());
	event.stopEvent();
});

      在 FineUIPro 中，需要如下代码：

      F(gridID).on('beforerowcontextmenu', function (event, rowIndex) {
	F(menuID).show();
	// 返回false，来阻止弹出浏览器右键菜单
	return false;
});
    4. $(grid.el.dom) 改为 grid.el

      开源版中，通过 grid.el.dom 获取表格的容器 DOM 节点，$(grid.el.dom) 获取相应的 jQuery 节点对象；FineUIPro 中，grid.el 返回的直接就是表格容器的 jQuery 节点对象。

    5. 获取下拉列表的显示文本，函数名由 f_getTextByValue 改为 getTextByValue

      一般用在可编辑单元格的 RendererFunction 中，用来由下拉列表的值获取显示的文本。

      开源版中：

      function renderGender(value) {
	return F(ddlGenderID).f_getTextByValue(value);
}

      FineUIPro 中：

      function renderGender(value) {
	return F(ddlGenderID).getTextByValue(value);
}
    6. 获取当前激活选项卡内 IFrame 的 window 对象更简单

      一般用在刷新当前激活选项卡内 IFrame 页面。

      开源版中：

      var iframeWnd = Ext.DomQuery.selectNode('iframe', mainTabStrip.getActiveTab().body.dom).contentWindow;
iframeWnd.location.reload(false);

      FineUIPro 中：

      var iframeWnd = mainTabStrip.getActiveTab().getIFrameWindow();
iframeWnd.location.reload(false);
    7. 获取单选按钮列表的选中值

      在开源版中，由于 extjs 本身没有提供方便的办法来获取和设置，所以 FineUI 进行了一定的封装。

      开源版中：

      iconList.f_getSelectedValues()[0]

      FineUIPro 中：

      iconList.getValue()

      设置单选按钮列表的选中项，在开源版和 FineUIPro 中分别为：

      开源版中：

      iconList.f_setValue('red')

      FineUIPro 中：

      iconList.setValue('red')

如果你在项目升级过程中遇到问题，请及时联系技术支持（QQ：2877408506）。

返回 FineUIPro 首页