CRA中的ExtJS（Sencha Modern）-关于现代vs经典等的问题

自从我搞砸了Ext（我想是4.12版）大约10年了，最近我被分配到了一个数据管理繁重的项目——所以我很自然地再次转向Ext

我从一个使用Material UI Table的人手中接手了这个项目，我正试图向我的项目经理“推销”使用正确的框架来完成任务的想法，而不是一味地说“React”，但自从我上次使用Ext以来，已经是10年前了，我有一些问题

现在我意识到Ext是作为React组件提供的——但我不太在乎这个包装器——我希望能够轻松地扩展和创建我自己的Ext.data.field或Ext.data.proxy和特殊列等等

我真的很喜欢Ext的可扩展性所带来的多功能性，因为我可以制作自己的特殊组件和Ext的其他部分

所以我去了厨房的水槽，快速地看了看什么是可用的，Ext的状态是什么-并且对Ext的状态非常满意，但是没有太多关于他们提供的文档和可用包之间奇怪的差异

现在我要问的第一个问题是，现代软件包目前是否不稳定，它是否使用了与经典软件相同的API

还是建议改用v6软件包

现在转到我的第二个/第三个问题——关于Ext.data.field及其扩展

在我可以问这些问题之前，我必须告诉一些关于我的设置的信息

它是用带有typescript的createreact应用程序引导的

然后，为了得到Ext，我只是（没有考虑太多捆绑包大小等。现在，只是想让它启动并运行）链接到.js和.css文件，并覆盖css文件以使一些东西工作（因此我的问题是“v7不稳定”）

因此，现在我可以将Ext作为普通模块导入-并以网格为例（这将导致问题-请耐心等待亲爱的读者）我可以这样做（显然有更多的配置和更多的列-但只是显示有问题的列和字段-我还重写了一些名称，如MyModel）

和自定义字段

import Ext from "../../../Ext";

Ext.define("XXX.data.field.FirebaseDate", {
  extend: "Ext.data.field.Date",
  alias: "data.field.firebasedate",

  convert: function(v: any) {
    if (!v) {
      return null;
    }

    const me = this;

    v = me.convertFirebaseToDate(v);

    if (v instanceof Date) {
      return v;
    }

    const dateFormat = this.dateReadFormat || this.dateFormat;
    let parsed: number;

    if (dateFormat) {
      return Ext.Date.parse(v, dateFormat, this.useStrict);
    }

    parsed = Date.parse(v);

    return parsed ? new Date(parsed) : null;
  },

  convertFirebaseToDate: function(timestamp: any) {
    let value = timestamp;

    if (timestamp && timestamp.toDate && Ext.isFunction(timestamp.toDate)) {
      value = timestamp.toDate().toISOString();
    }

    return value;
  }
});

第一个问题:

我记得在

convert

方法中，通过调用

this.callParent（v）

，可以跳过许多从扩展类中窃取的复制代码，这是否发生了变化？或者我可能会因为我的设置而遇到问题

第二个问题是，我记得我能够提供一种方法，以防字段值在输入到任何类型的存储写入运算符之前需要转换，但却无法找到文档-我错了吗，这不可能吗

很抱歉读了这么长时间

由于我找不到firebase代理，请告诉我您是否需要：-）

const clone: any = window
const Ext: any = clone.Ext

export default Ext

import React, { useEffect } from 'react'
import uniqid from 'uniqid'
import Ext from '../../Ext'
import '../../models/MyModel'

const ItemGrid = () => {
  const id = uniqid('ItemGrid')

  useEffect(() => {
    Ext.create({
      xtype: 'container',
      layout: 'fit',
      style: { height: '100%', width: '100%' },
      renderTo: id,
      items: [
        {
          xtype: 'grid',
          store: {
            model: 'XXX.model.MyModel',
            autoLoad: true,
            data: [],
            remoteSort: true,
            pageSize: 40,
            storeId: 'MyModelStoreId',
          },
          columns: [
            {
              xtype: 'datecolumn',
              dataIndex: 'time',
              format: 'Y/m/d',
              text: 'Time',
              width: 130,
            },
          ],
        },
      ],
    })
  }, [])

  return <div id={id} style={{ height: '100%' }} />
}

export default ItemGrid

import Ext from "../Ext";
import "../Ext/data/field/FirebaseDate";
import "../Ext/data/proxy/Firebase";

export default Ext.define("XXX.model.Item", {
  extend: "Ext.data.Model",
  proxy: {
    type: "FirebaseProxy", // Special proxy I made
    table: "items"
  },
  fields: [
    { name: "time", type: "firebasedate" },
  ]
});

import Ext from "../../../Ext";

Ext.define("XXX.data.field.FirebaseDate", {
  extend: "Ext.data.field.Date",
  alias: "data.field.firebasedate",

  convert: function(v: any) {
    if (!v) {
      return null;
    }

    const me = this;

    v = me.convertFirebaseToDate(v);

    if (v instanceof Date) {
      return v;
    }

    const dateFormat = this.dateReadFormat || this.dateFormat;
    let parsed: number;

    if (dateFormat) {
      return Ext.Date.parse(v, dateFormat, this.useStrict);
    }

    parsed = Date.parse(v);

    return parsed ? new Date(parsed) : null;
  },

  convertFirebaseToDate: function(timestamp: any) {
    let value = timestamp;

    if (timestamp && timestamp.toDate && Ext.isFunction(timestamp.toDate)) {
      value = timestamp.toDate().toISOString();
    }

    return value;
  }
});