Ext JS (Sencha Modern) в CRA - Вопрос о модернах против классиков c и более

Question

Прошло около 10 лет с тех пор, как я связался с Ext (4.12, я думаю, что так и было), и недавно я был назначен на проект, который требует большого объема управления данными - поэтому, естественно, я снова обратился к Ext.

I взял этот проект у парня, который использовал Material-UI Table - и я пытаюсь «продать» моему менеджеру проекта идею использования подходящей среды для выполнения задачи вместо того, чтобы просто слепо кричать «React» по всей линии - но прошло 10 лет go с тех пор, как я в последний раз связывался с Ext, у меня есть несколько вопросов.

Теперь я понимаю, что Ext поставляется в качестве компонентов React - но мне не очень важна эта оболочка - я хочу иметь возможность легко расширять и создавать свои собственные Ext.data.field или Ext.data.proxy и специальные столбцы, а что нет.

Мне очень понравилась универсальность, которую я получил от расширяемости Ext, будучи в состоянии создавать свои собственные специальные компоненты и другие детали Ext.

Поэтому я пошел к кухонной раковине, чтобы быстро взглянуть на то, что было доступно, и каково было состояние Ext - и был весьма доволен состоянием Ext, но не столько о документации, которую они предоставляют, ни о странных различиях между доступными пакетами.

Теперь мой первый вопрос - является ли современный пакет нестабильным на данный момент, и он не использует тот же API, что и classi c?

Или вместо него рекомендуется использовать пакет v6?

Теперь перейдем ко второму / третьему вопросу - о Ext.data. .field и расширяя его.

Прежде чем я смогу задать эти вопросы, я должен немного рассказать о своей настройке.

Он загружается с помощью create-реагировать-приложение с машинописью.

Затем, чтобы получить Ext, я просто (не особо задумывался о размере пакета и т. Д. c .. на данный момент, просто хотел, чтобы он был запущен) работал с файлом. js и. css, и переопределить файл css, чтобы заставить некоторые вещи работать (следовательно, мой вопрос "v7 unstable")

<script src="%PUBLIC_URL%/scripts/ext-modern-all-debug.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="%PUBLIC_URL%/styles/theme-material-all-debug.css" rel="stylesheet"></link>
<link href="%PUBLIC_URL%/styles/ext-overrides.css" rel="stylesheet"></link>

И чтобы использовать Ext из глобальной области видимости, я только что сделал эту оболочку экспорта для машинописного текста (я wi * 1054) * был @ тип es / sencha-современный пакет tho)

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

export default Ext

Так что теперь я могу импортировать Ext как обычный модуль - и сделать сетку в качестве примера (что приведет к вопросам - наберитесь терпения, дорогой читатель), я могу сделайте так (очевидно, что происходит больше настроек и больше столбцов - но просто показаны столбец и поле, о котором идет речь - я также переписал некоторые имена, такие как MyModel)

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

Вот пользовательская модель XXX.data.MyModel просто показываю одно поле

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;
  }
});

Теперь первый вопрос:

Я помню, как смог пропустить большую часть этого реплицированного кода украденный из расширенного класса в методе convert путем вызова this.callParent(v) - это изменилось? Или я, возможно, сталкиваюсь с проблемами из-за моей установки?

Второй вопрос - я помню, что был в состоянии предоставить метод в случае, если значение поля необходимо преобразовать перед передачей в любой оператор записи хранилища, но не удалось найти документацию - я не прав, разве это невозможно?

Извините за длительное чтение

Поскольку я не смог найти прокси-сервер firebase, дайте мне знать, если вам нужен: -)