@gusmano/reext

React ReExt - A React Component for ExtJS

React ReExt is a React component for the Sencha ExtJS Framework.

Quick Start using Vite on macOS

If you want to get an example up and running quickly, run these commands in a macOS terminal window

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
npm run dev
o

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

npm run dev
-h
o

License

MIT