ExtJS (Sencha Modern) in CRA - Question about modern vs classic and more

Question

Been some 10 years or so since I messed with Ext (4.12 I think it was) and recently I was assigned to a project that is data management heavy - so naturally I turned to Ext again.

I took over this project from a guy who had used Material-UI Table - and I am trying to "sell" my project manager the idea of using the right framework for the task instead of just blindly yapping "React" all over the line - but it being 10 years ago since I last messed with Ext I have some questions.

Now I do realise Ext comes as React components - but I do not much care for this wrapper - I want the ability to easily extend and create my own Ext.data.field, or Ext.data.proxy and special columns and what not.

I really loved the versatility I got from the extendability of Ext by being able to make my own special components and other parts of Ext.

So I went to the kitchen sink to quickly get a look at what was available, and what the state of Ext was - and was quite pleased by the state of Ext, but not so much about the documentation they provide and the weird differences between the packages available.

Now my first question - is the modern package unstable at the moment, and does it not use the same API as classic?

Or is it recommended to use the v6 package instead?

Now on to my second/third question - which is about Ext.data.field and extending it.

Before I can ask these questions I have to inform a little about my setup.

It is bootstrapped with create-react-app with typescript.

Then to get Ext in I simply just (did not think much about bundle size etc.. for now, just wanted it up and running) linked to the .js and .css file, and an override css file to get some stuff working (hence my question "is v7 unstable")

And to use Ext from the global scope I just made this export wrapper for typescript (I wish there was a @types/sencha-modern package tho)

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

export default Ext

So now I can import Ext as normal module - And to make a grid as example (which will lead to the questions - be patient please dear reader) I can do like this (obviously there are more config going on and more columns - but just showing the column and field in question - I also rewrote some names like 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 
}

export default ItemGrid

Here is the custom model XXX.data.MyModel just showing the one field

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" },
  ]
});

And the custom field

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

Now the first question:

I remember being able to skip a lot of this replicated code stolen from the extended class in the convertmethod by calling this.callParent(v)- has that changed? Or am I maybe running into problems due to my setup?

Second question is that I remember being able to provide a method in case the field value needed converting before being fed to any sort of store write operator, but have not been able to find documentation - am I wrong, is this not possible?

Sorry for lengthy read

As I could not find a firebase proxy then let me know if you would like one :-)

ExtJS (Sencha Modern) in CRA - Question about modern vs classic and more

0 Answers