将旧 ASP.NET 应用程序中的 ExtJS 从 2.3 升级到 6

Question

寻求一些帮助。 TLDR 版本：我们有一个利用 ExtJS 2.3 的 ASP.NET Web 应用程序，我们希望升级到当前的 ExtJS 版本。 试图让我了解我们的目的。

现在了解详情。 我先说我不是 ExtJS 或 .NET 开发方面的专家。 事实上，当涉及到 Web 开发时，我几乎是一个新手，所以请原谅我的任何糟糕的解释或滥用术语。 我的团队正在我们公司几年前开发的“自定义”框架上开发 Web 应用程序。 它基于一些可重新运行的代码生成工具，这些工具采用 xml 模板并吐出必要的代码文件。 我们的项目是一个 ASP.NET MVP 应用程序，它使用 .aspx 页面和 NHibernate for ORM。 我们的 UI 是从 ExtJS 创建的——控件在每个页面的 .js 文件中定义，然后在 .aspx 页面中“组装”。 代码隐藏包含利用 C# 代码展示器的 Web 方法。 我已经包含了一个片段来演示我在下面谈论的内容。

.aspx 页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Entity.aspx.cs" Inherits="View.Example.EntityView" MasterPageFile="~/MasterPages/Content.Master" %>
<asp:Content ID="Content1" runat="server">
<script language="javascript" type="text/javascript" src="~/Scripts/ext-2.2.1/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="<%=ResolveUrl("~/Scripts/Factory/Example/Entity.js")%>"></script>
<script language="javascript" type="text/javascript">

var localConfig = new panelConfig();

localConfig.applyExtendedConfig('default_page');

localConfig.addItem(new Ext.grid.GridPanel(pageConfigs.default_page_ManageEntity));
localConfig.addItem(
    new Ext.form.Hidden({
    id: 'ManageEntityGrid_Rows'
    }));
var default_page = localConfig.createExt();
default_page.on('render', default_page_OnShow, default_page, { single: true });

</script>
</asp:Content>

.js 文件：

var get_manageEntity_columns = function() {
var columns = [
    { header: "Name"
    ,id: 'ManageEntity-col-Name'
    , dataIndex: 'Name'
    , sortable: true
    },

    { id: 'ManageEntity-col-ActiveFlag'
    , header: 'Active Flag'
    , dataIndex: 'ActiveFlag'
    , hidden: true
    ,tags: []
    , sortable: true
    },

    { id: 'ManageEntity-col-CreatedTimestamp'
    , header: 'Created Timestamp'
    , dataIndex: 'CreatedTimestamp'
    , hidden: true
    ,tags: []
    , renderer : formattedDateTime
    , sortable: true
    },

    { id: 'ManageEntity-col-Id'
    , header: 'Entity ID'
    , dataIndex: 'Id'
    , hidden: true
    ,tags: []
    , sortable: true
    }
];
return columns;
}

var get_grid_reader_manageEntity = function(custom_fields) {
    var fields = [
    { name: 'ActiveFlag', mapping: 'ActiveFlag' },
    { name: 'CreatedTimestamp', mapping: 'CreatedTimestamp' },
    { name: 'Id', mapping: 'Id' },
    { name: 'Name', mapping: 'Name' }
    ];
    if (custom_fields) {
        fields = fields.concat(custom_fields);
    }
    return new Ext.data.JsonReader({
    root: 'Results',
    totalProperty: 'Total',
    id: 'Id'
    }, fields);
}

var get_grid_datastore_manageEntity = function() {
    var store = new Ext.data.Store({
    proxy: new Ext.data.PageMethodProxy({
    pageMethod: 'GetManageEntity'
    }),
        reader: get_grid_reader_manageEntity()
    , remoteSort: true
    });

    store.loadOrReload = function() {
        if (store.rapidLoaded)
            store.reload();
        else
        {
            store.rapidLoaded = true;
            store.load({ params: { start: 0, limit: gPageSize }
            });
        }
    }
    get_grid_datastore_manageEntity = function() { return store; };
    return store;
}

var pageConfigs = {
default_page_ManageEntity: {
    store: get_grid_datastore_manageEntity(),
    columns: get_manageEntity_columns(),
    viewConfig: {
        forceFit: true
    },
    sm: get_manageEntity_sm(),
    layout:'fit',
    frame: true,
    id: 'ManageEntity',
    plugins: [
        grid_filters_manageEntity
        ],
    iconCls: 'icon-grid',
    loadMask: true,
    stripeRows: true,
    bbar: get_grid_paging_toolbar_manageEntity(),
    listeners: {
            rowcontextmenu: show_grid_menu_manageEntity
            ,bodyscroll: function() {
                var menu = get_grid_menu_manageEntity();
                if (menu.isVisible()) menu.hide();
            }
            ,headerClick: function() {
                this.getStore().on('beforeload', this.saveState, this, { single: true });
            }
            ,render: function(){
                var grid = this;
                Ext.onReady(function() {
                    add_applied_filters(grid);
                var grid_state = Ext.state.Manager.get('ManageEntity') || {};
                if (!grid_state.default_filter_applied) {
                    var filters = grid_filters_manageEntity;
                    var activeflag_filter = filters.getFilter("ActiveFlag");
                    activeflag_filter.setValue(["", new Array("1")]);
                    activeflag_filter.setActive(true);
                    grid.on('beforestatesave', function(grid, state) { state.default_filter_applied = true; });
                }
                    grid.getStore().load({ params: { start: 0, limit: gPageSize }
                    });
            });
        }
    }
}}

.aspx.cs 文件：

[WebMethod()]
public static ExtJSGridData GetManageEntity(PageProxyArgs args)
{
    var watch = new Stopwatch();
    watch.Start();

    try
    {
        var data = new ExtJSGridData();
        var criteria = GetManageEntityQuery(args);
        criteria.SetFirstResult(args.Start).SetMaxResults(args.Limit);
        data.Results = GetDataManageEntity(args.RecordId, criteria);
        criteria.SetFirstResult(0).SetMaxResults(RowSelection.NoValue);
        criteria.ClearOrders();
        data.Total = criteria.SetProjection(Projections.CountDistinct("Id")).UniqueResult<int>();
        data.UserUiStateSaved = UserUiStateHelper.SaveUserUiStateInTransaction(args.UserUiState);
        watch.Stop();
        PageLogHelper.CurrentLog.ServerTime = watch.ElapsedMilliseconds;
        return data;
    }
    catch (Exception ex)
    {
        LogManager.GetLogger((MethodBase.GetCurrentMethod().DeclaringType)).Error(ex);
        ErrorHandler.LogError(ex);
        throw;
    }
}

private static IList GetDataManageEntity(int id, ICriteria criteria)
{
    var list = criteria.List<Model.BusinessObjects.Entity>();
    var jsonList = Model.BusinessObjects.Entity.ToJSON(list);
    return jsonList;
}

private static ICriteria GetManageEntityQuery(PageProxyArgs args)
{
    ICriteria criteria = StaticPresenter.GetEntity();

    var helper = new GridFilterHelper(criteria, args, _dManageEntityLookupSortInfo);
    helper.ApplyFilterMap(EntityJSON.GetGridFilterMap(criteria, args.Filters));

    MapManageEntityFilters(args.Filters, criteria);
    helper.ApplyFilters();

    if (args.SortInfo == null || string.IsNullOrEmpty(args.SortInfo.FieldName))
        return criteria;

    IList<IProjection> sortMap = StaticPresenter.GetSortMap_ManageEntity(args.SortInfo.FieldName, args.RecordId, args.ExtraParams, criteria);
    if (sortMap == null)
        sortMap = EntityJSON.GetSortMap(args.SortInfo.FieldName, criteria);

    helper.ApplySort(sortMap);

    return criteria;
}

那么，问题就来了。如前所述，我们使用的 ExtJS 版本是 2.3，我们希望升级到当前版本。 我已经完成了一些谷歌搜索和查看 sencha 文档的初步作业，但是有些事情我不清楚，希望在我开始着手这项工作之前得到解决。 我试图在下面概述我的具体问题。

首先也是最重要的：我们的应用程序的构建方式是否可以使用 ExtJS 6？ 在这里，我的意思是利用 ExtJS API 在 .js 文件中定义控件，然后在 .NET C# 主干之上创建一个 UI。 根据其他用户的更改说明和问题，很明显 2.3 和 6 之间发生了巨大的（轻描淡写的）更改。在 ExtJS 中构建您的整个应用程序，包括模型和视图（和控制器？）。 这是一个要求，还是我们仍然可以将 ExtJS 控件放在我们的 .NET C# 模型和视图之上？

作为跟进，我一直在看到有关 Sencha CMD 创建和构建应用程序等的参考资料。无论如何都需要 cmd 吗？ 或者我们可以像我们目前正在做的那样简单地引用 ext js 库吗？

假设问题 1 的答案是肯定的，那么下一个显而易见的问题就变成了：这将需要多少工作？ 让我们摆脱“很多”的答案——我知道。 我所知道的是，我们将不得不更新我们所有的模板以使用新的 API 语法（new Ext…到 Ext.create() 等）。 我没问题。 我想弄清楚的是我不知道的。 假设我更新了所有的语法，我们的应用程序会工作吗？ 还是我需要更改/修复其他事情才能使其正常工作？

与问题 2 相关：根据我的阅读，控件的数据存储方式似乎发生了变化，它们现在使用 ExtJS 中定义的模型。 这是要求吗？ 如前所述，我们目前在 aspx.cs 文件中使用 Web 方法。 我需要在 ExtJS 中复制我们的 C# 模型吗？

最后，我看到这个问题问了很多，但我似乎找不到明确的答案。 经典与现代？ 我通常看到的答案是，现代更适合触摸屏和现代浏览器，而经典更适合桌面用户。 我也在一些地方读到现代可用的控件较少。 我们的网络应用程序在本地环境中运行，将来不会移动到移动设备上，这让我认为经典可能是正确的选择？ 我想我只是想知道技术上有什么区别。

我确定有些东西我什至不知道我错过了。 欢迎任何和所有反馈。

Answer 1

这是可能的，但你必须做很多笔迹。 就在三周前，我不得不利用 3.4 ASP 到 6.2.1

您可以将变量设置为全局变量，并在开始时将它们添加到 mainView ViewModel 或立即加载它们 onBeforeLaunch。

然后编写您的应用程序并使用 Sencha CMD 构建它。 最后将所有内容添加到您的 ASP 内容中。

关于工作量......很大程度上取决于您的代码的结构，重写代码的难易程度。

让我们假设它在整个应用程序中以相同的风格编写，那么它会相对容易。