@gusmano/reext v0.0.398

React ReExt - React Components for ExtJS

Unleash the power of Sencha Ext JS in React

React ReExt provides React components for the Sencha ExtJS Framework.

Examples

classic toolkit with classic theme

Getting Starting using the VS Code Extension

The best way to get started with React ReExt is to use the ReExt Designer Extension in VS Code

Download the ReExt Designer VS Code Extension

To install the ReExt Designer Extension in VS Code, click on the Extensions Activity Bar item, then click the '...' menu in the upper right corner of the Extensions View, and select 'Install from VSIX...'

Quick Start - not using VS Code Extension

(takes less than 1 minute to run)

Note: Quick Start assumes npm is installed. To install npm, install Node.js

The commands can be run all at one time.

MacOS

Copy and paste the commands below into a MacOS terminal window.

Vite

npm create vite@latest reextvite -- --template react-swc
cd reextvite
npm install @gusmano/reext@latest
cp node_modules/@gusmano/reext/dist/example/ReExtData.json src/ReExtData.json
cp node_modules/@gusmano/reext/dist/example/App.jsx src/App.jsx
cp node_modules/@gusmano/reext/dist/example/main.jsx src/main.jsx
npx vite --open

Create React App

npx create-react-app reextcra
cd reextcra
npm install @gusmano/reext@latest
cp node_modules/@gusmano/reext/dist/example/ReExtData.json src/ReExtData.json
cp node_modules/@gusmano/reext/dist/example/App.jsx src/App.js
cp node_modules/@gusmano/reext/dist/example/main.jsx src/index.js
npm start

Windows

Copy and paste the commands below into a Windows Command Prompt window.

Vite

npm create vite@latest reextvite -- --template react-swc
cd reextvite
npm install @gusmano/reext@latest
xcopy node_modules\@gusmano\reext\dist\example\ReExtData.json src\ReExtData.json /Y
xcopy node_modules\@gusmano\reext\dist\example\App.jsx src\App.jsx /Y
xcopy node_modules\@gusmano\reext\dist\example\main.jsx src\index.js /Y
npx vite --open

Create React App

npx create-react-app reextcra
cd reextcra
npm install @gusmano/reext@latest
xcopy node_modules\@gusmano\reext\dist\example\ReExtData.json src\ReExtData.json /Y
xcopy node_modules\@gusmano\reext\dist\example\App.jsx src\App.js /Y
xcopy node_modules\@gusmano\reext\dist\example\main.jsx src\index.js /Y
npm start

Step by Step Guide - not using VS Code Extension

Create a React application

create react app

https://create-react-app.dev/docs/getting-started/

npx create-react-app reextcra

vite

https://vitejs.dev/guide/

npm create vite@latest reextvite -- --template react-swc

Installation

Use the package manager npm to install React ReExt.

npm install @gusmano/reext

Installing the Sencha ExtJS SDK

IMPORTANT-EXTJS FRAMEWORK REQUIREMENT:

React ReExt is dependent on Sencha ExtJS, and to run the framework locally you must have the framework installed in the public folder of your React project.

The Quick Start application is configured to run the Sencha ExtJS version 7.0.0 GPL from a remote server.

This is for demo purposes only and is not configured for Licensed development.

A licenced Commercial version of the framework can be acquired from the Sencha Support Portal - This can be done using the ReExt Designer VS Code Extension.

React ReExt can be configured to use any commercially available version of the Sencha Ext JS framework (7x and above).

For more information, download the ReExt Designer VS Code Extension (above), or contact Marc Gusmano at marcgusmano@gmail.com.

React ReExt has been tested with the latest version of the Sencha Ext JS framework, which at the time of this publishing is Sencha ExtJS version 7.8.0.

To purchase a commercial version of Sencha ExtJS, to to https://store.sencha.com/.

React version

React ReExt has been tested with the latest version of React, which at the time of this publishing is React 18.2.0.

Usage - ReExtProvider:

In main.jsx or index.js you use the ReExtProvider component:

import { ReExtProvider } from '@gusmano/reext';

var ReExtData = {
    "sdkversion": "7.8.0",
    "toolkit": "classic",
    "theme": "classic",
    "debug": false,
    "urlbase": "./",
    "location": "remote"
}

reactroot.render(
    <ReExtProvider splash={true} ReExtData={ReExtData}>
        <App />
    </ReExtProvider>
)

Usage - Example Code:

import React, { useState, useRef } from 'react';
import ReExt from '@gusmano/reext';

const App=()=>{
 const [labelcmp, setLabelCmp] = useState(null);
 const labelcmpRef = useRef();
 labelcmpRef.current = labelcmp;
 const [labeltext, setLabelText] = useState('initial text');
 const [row, setRow] = useState(null);

 return (
  <div style={{
   boxSizing:'border-box',height:'100%',
   display:'flex',flexDirection:'column'
  }}>
   <ReExt xtype='logo'/>
   <div style={{display:'flex'}}>
    <ReExt xtype='button'
     config={{text:'click me',width:100,ariaLabel:'demobutton'}}
     onTap={()=>{
      labelcmpRef.current.setHtml('set using method call');
      setLabelText('set using state');
     }}
    />
   </div>
   <ReExt xtype='grid'
    style={{height:300}}
    config={{
     title: 'grid',
     columns: [
      {text:'Name',dataIndex:'name',width:200},
      {text:'Email',dataIndex:'email',flex:1},
      {text:'Phone',dataIndex:'phone',width:200}
     ],
     data: [
      {name:'Lisa',email:'lisa@simpsons.com',phone:'555-111-1224'},
      {name:'Bart',email:'bart@simpsons.com',phone:'555-222-1234'},
      {name:'Homer',email:'homer@simpsons.com',phone:'555-333-1244'},
      {name:'Marge',email:'marge@simpsons.com',phone:'555-444-1254'}
     ]
    }}
    onSelect={(grid, selected)=>{
     var row = selected[0].data
     setRow(row)
     var rowString = JSON.stringify(row)
     labelcmpRef.current.setHtml(rowString)
     setLabelText(rowString)
    }}
   />
   <div style={{flex:1,padding:20,border:'1px solid gray'}}>
    {row !== null &&
     <>
     <ReExt xtype='label' config={{html: `name: ${row.name}`}}/>
     <ReExt xtype='label' config={{html: `email: ${row.email}`}}/>
     <ReExt xtype='label' config={{html: `phone: ${row.phone}`}}/>
     </>
    }
   </div>
   <div style={{flex:1,padding:20,border:'1px solid gray'}}>
    <ReExt xtype='label'
     config={{html:'initial text'}}
     ready={(cmp)=>{
      setLabelCmp(cmp)
     }}
    />
    <ReExt xtype='label'
     config={{html:labeltext}}
    />
   </div>
  </div>
 )
}
export default App

Run the React application

Create React App

npm start

Vite

npx vite --open

Documentation

The React ReExt Component

The ReExt React component has 5 static props (only xtype is required) and any number of optional event props

Example of a React ReExt button

<ReExt xtype='button'
 className='okbutton'
 style={{color:'green'}}
 config={{text:'OK'}}
 ready={(cmp)=>{console.log(cmp)}}
 onTap={(button,e,eOpts)=>{console.log(`${button.text}`)}}
/>

In the above example, here are the links to the ExtJS documentation

• xtype='button'
• config={{text:'click me'}}
• onTap={(button,e,eOpts)=>{console.log(${button.text})}}/a>

More details on the the React ReExt props

• xtype (required): the xtype of the component as defined in https://docs.sencha.com/extjs/7.0.0/
• className (optional): the css class to be attached to the parent div of the underlying Ext JS component (each underlying ExtJS component is wrapped with a parent div that is width:'100%' and height: '100%' - unless overwritten in the className or style config)
• style (optional): the css style to be attached to the parent div of the ExtJS component
• config (optional): a JavaScript object with the configs of the component as defined in https://docs.sencha.com/extjs/7.0.0/
• ready(cmp) (optional): the event that is fired by the ReExt component when the underlying ExtJS component is created. The value of this config is a function in your React hosting component with the parameter being the created ExtJS object.
• storeloaded(store, cmp) (optional): the event that is fired by the ReExt component when the async store associated with the component is loaded.
• 'on' props (optional): a prop that corresponds to an event fired by the ExtJS component; follow the pattern of 'on' with the first letter of the event capitalized. (ie, the button xtype has a tap event, and the corresponding prop is onTap). The value of this prop is a function in your React hosting component.

Custom ExtJS Components

To include custom ExtJS components as modules to be imported into your React application, the ExtJS runtime needs to be fully loaded - this will ensure that the Ext.define calls will succeed.

React ReExt includes an async function named ReExtLoader that ensures that the ExtJS runtime is loaded before any React components are included.

Also, an optional Fill method is available that will add css styles to the html, body and root elements to allow for using 100% of the browser client area.

Here is an example of using these functions in the loading sequence for your React app. (main.jsx or index.js)

import React from 'react'
import ReactDOM from 'react-dom/client'
import { ReExtLoader, Fill } from '@gusmano/reext'

(async () => {
 Fill();
 await ReExtLoader(); // can pass a parameter '-debug'
 const { default: App } = await import('./App');
 ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
   <App/>
  </React.StrictMode>
 )
})();

Custom ExtJS components can now be added as an import.

in src/App.jsx

import './List.jsx'
...
return (
 <ReExt xtype='mainlist'
  style={{flex:2,border:'1px solid gray'}}
  onSelect={(sender, record)=>{console.log('row selected',record[0])}}
 />
)

./List.jsx

import './store/Personnel'

Ext.define('ReExt.view.main.List', {
 extend: 'Ext.grid.Grid',
 xtype: 'mainlist',
 store: {type: 'personnel'},
 columns: [
  {text: 'Name',dataIndex: 'name'}
 ]
})

./store/Personnel.jsx

Ext.define('ReExt.store.Personnel', {
 extend: 'Ext.data.Store',
 alias: 'store.personnel',
 data: { items: [
 {name:'Jean Luc',email:"jeanluc@enterprise.com",phone:"555-111-1111"},
 {name:'Worf',email:"worf@enterprise.com",phone:"555-222-2222"},
 {name:'Deanna',email:"deanna@enterprise.com",phone:"555-333-3333"},
 {name:'Data',email:"data@enterprise.com",phone:"555-444-4444"}
 ]},
 proxy: {
  type: 'memory',
  reader: {
   type: 'json',
   rootProperty: 'items'
  }
 }
});

License

Trial