Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@gusmano/reext
Advanced tools
React ReExt is a React component for the Sencha ExtJS Framework components.
https://create-react-app.dev/docs/getting-started/ ''' npx create-react-app reextcra '''
https://vitejs.dev/guide/ ''' npm create vite@latest reextvite -- --template react-swc '''
Use the package manager npm to install React ReExt.
npm install @gusmano/reext
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/ext folder to the project's public/ext folder.
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 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.7.0.
To purchase a commercial version of Sencha ExtJS, to to https://store.sencha.com/.
React ReExt has been tested with the latest version of React, which at the time of this publishing is React 18.2.0.
import React, { useState } 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');
return (
<div style={{
boxSizing:'border-box',height:'100%',
display:'flex',flexDirection:'column'
}}>
<ReExt xtype='logo'/>
<div style={{display:'flex',border:'1px solid red'}}>
<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:'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;
var rowString = JSON.stringify(row);
labelcmpRef.current.setHtml(rowString);
setLabelText(rowString);
}}
/>
<ReExt xtype='label'
config={{html: 'initial text'}}
ready={(cmp) => {
setLabelCmp(cmp);
}}
/>
<ReExt xtype='label'
config={{html:labeltext}}
/>
</div>
)
}
export default App
FAQs
React ReExt
The npm package @gusmano/reext receives a total of 48 weekly downloads. As such, @gusmano/reext popularity was classified as not popular.
We found that @gusmano/reext demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.