@gusmano/reext

React ReExt

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

Installation

Use the package manager npm to install ReExt.

npm install @gusmano/reext

Installing the Sencha ExtJS SDK

IMPORTANT:

React ReExt is dependant on a version of the Sencha ExtJS framework.

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

To use any other commercially available version of the Sencha Ext JS framework, contact Marc Gusmano at [e-mail].

React ReExt has been tested with the latest version of the 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/.

Usage - Example Code:

import React from 'react';
import ReExt from '@gusmano/reext';

const App=()=>{
 return (
  <div style={{boxSizing:'border-box',height:'100%',display:'flex',flexDirection:'column'}}>
   <ReExt xtype='logo'/>
   <ReExt xtype='button'
    config={{text: 'click me'}}
    onTap={() => {
     console.log('clicked')
    }}
   />
   <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)=>{
     console.log(selected[0].data)
    }}
   />
  </div>
 )
}
export default App

License

MIT