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

时间：2018-02-08 19:43:48

标签： javascript asp.net extjs

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

现在了解详情。我将在序言中说我不是ExtJS和.NET开发方面的专家。事实上，在网络开发方面，我几乎都是新手，所以请原谅我的任何不良解释或滥用条款。我的团队正在开发一个多年前在我们公司开发的“定制”框架上的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中的模型和视图（以及控制器？）。这是一个要求，还是我们仍然可以在我们的.NET C＃模型和视图之上放置ExtJS控件？

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

假设问题1的答案是肯定的，那么下一个显而易见的问题就是：这将会是多少工作？让我们得到“很多”的答案 - 我知道。我所知道的是，我们必须更新所有模板以使用新的API语法（新的Ext ...到Ext.create（）等）。我没关系。我想弄清楚的是我不知道的。假设我更新了所有语法，我们的应用程序会工作吗？或者还有其他我需要更改/修复以使其正常工作的东西吗？

与问题2相关：基于我的阅读，它看起来像控件的数据存储方式已经改变，现在它们使用ExtJS中定义的模型。这是一个要求吗？如前所述，我们目前在aspx.cs文件中使用Web方法。我是否需要在ExtJS中复制我们的C＃模型？

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

我确信有些东西我甚至都不知道我错过了。欢迎提出任何反馈意见。

1 个答案:

答案 0 :(得分：0)

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

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

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

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

让我们假装它在整个应用程序中以相同的样式编写，然后它会相对容易。

相关问题
最新问题