@gusmano/reext

React ReExt - React Components for ExtJS

React ReExt provides React components for the Sencha ExtJS Framework.

View the running example at http://marcgusmano.com/ReExt/

Quick Start (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
cp -r node_modules/@gusmano/reext/dist/ext public
cp node_modules/@gusmano/reext/dist/example/App.jsx src/App.jsx
npx vite --open

Create React App

npx create-react-app reextcra
cd reextcra
npm install @gusmano/reext
cp -r node_modules/@gusmano/reext/dist/ext public
cp node_modules/@gusmano/reext/dist/example/App.jsx src/App.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
xcopy node_modules\@gusmano\reext\dist\ext public\ext /E/H/C/I
xcopy node_modules\@gusmano\reext\dist\example\App.jsx src\App.jsx /Y
npx vite --open

Create React App

npx create-react-app reextcra
cd reextcra
npm install @gusmano/reext
xcopy node_modules\@gusmano\reext\dist\ext public\ext /E/H/C/I
xcopy node_modules\@gusmano\reext\dist\example\App.jsx src\App.js /Y
npm start

Step by Step Guide

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:

React ReExt is dependent on a version of the Sencha ExtJS framework (modern toolkit), and must have the framework installed in the public/ext folder of your React project.

The npm package includes the Sencha ExtJS varsion 7.0.0 GPL and can be used by copying the node_modules/@gusmano/reext/dist/ext folder to the project's public/ext folder.

macOS

cp -r node_modules/@gusmano/reext/dist/ext public

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

For more information, contact Marc Gusmano at [e-mail].

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.7.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 - 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:'[e-mail]',phone:'555-111-1224'},
      {name:'Bart',email:'[e-mail]',phone:'555-222-1234'},
      {name:'Homer',email:'[e-mail]',phone:'555-333-1244'},
      {name:'Marge',email:'[e-mail]',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 Summary

The ReExt React component has 5 props

• className: the css class to be attached to the parent div of the Ext JS component (each underlying ExtJS component is wrapped with a parent div that is width:'100%' and height: '100%')
• style: the css style to be attached to the parent div of the ExtJS component
• xtype: the xtype of the component as defined in https://docs.sencha.com/extjs/7.0.0/
• config: a JavaScript object with the configs of the component as defined in https://docs.sencha.com/extjs/7.0.0/
• ready: 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.
• 'on' configs: a config that corresponds to an event fired by the 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 config is onTap). The value of this config is a function in your React hosting omponent.

License

MIT