创建 React 应用程序

使用 Create React App：

• 访问 Create React App 文档。
• 运行命令：npx create-react-app reextcra。

使用 Vite：

• 访问 Vite 文档。
• 运行命令：npm create vite@latest reextvite -- --template react-swc。

安装 ReExt

使用 npm 安装 ReExt：

npm install @sencha/reext

安装 Sencha ExtJS SDK

重要 - EXTJS 框架要求：

ReExt 依赖于 Sencha ExtJS，要在本地运行框架，您必须在 React 项目的 public 文件夹中安装该框架。

快速入门应用程序配置为从远程服务器运行 Sencha ExtJS 7.8.0 试用版。

这仅用于演示目的，未配置用于许可开发。

可以从 Sencha 支持门户直接获取框架的许可商业版本，也可以使用 ReExt Designer VS Code 扩展（预览版）完成。

ReExt 可以配置为使用任何商业上可用的 Sencha Ext JS 框架版本（7x 及以上）。

有关更多信息，请下载 ReExt Designer VS Code 扩展（预览版）或通过 [email protected] 联系我们。

ReExt 已经过最新版本的 Sencha Ext JS 框架的测试，在本文发布时，最新版本是 Sencha ExtJS 7.8.0。

点击此处 购买商业版本的 Sencha ExtJS。

获取 Ext JS 的许可版本

要获取 Ext JS 的许可版本

1. 登录到 Sencha 支持门户。
2. 单击页面左侧的下载菜单 - 将显示 Sencha 下载页面。
3. 单击“Downloads”（下载）按钮 - 将下载 7.8.0.zip 文件（这是 Ext JS 的最新版本）。
4. 在下载了 7.8.0.zip 文件的文件系统中，解压缩该文件。
5. 将创建一个名为 ext-7.8.0 的文件夹
6. 将 ext-7.8.0 文件夹复制到 React 应用程序的 public 文件夹中
7. 在 React 应用程序的组件中，更改为以下内容（“location”：“local”）

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

var reactroot = ReactDOM.createRoot(document.getElementById('root'));

var ReExtData = {
  "sdkversion": "7.8.0",
  "toolkit": "classic",
  "theme": "classic",
  "rtl": false,
  "locale": "en",
  "debug": false,
  "urlbase": "./",
  "location": "local"
}
var trialkey = 'trial key from email goes here...'
reactroot.render(
  <ReExtProvider splash={true} ReExtData={ReExtData} reextkey={trialkey}>
    <App />
  </ReExtProvider>
)

ReExt 试用密钥

要获取试用密钥

• 运行您的 ReExt 应用程序。
• 填写出现的对话框上的表单。
• 试用密钥将通过电子邮件发送。

React 版本

ReExt 已经过最新版本的 React (18.3.1) 的测试。

用法 - ReExtProvider

在 main.jsx 或 index.js 中使用 ReExtProvider 组件。

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

var reactroot = ReactDOM.createRoot(document.getElementById('root'));

var ReExtData = {
  "sdkversion": "7.8.0",
  "toolkit": "classic",
  "theme": "classic",
  "rtl": false,
  "locale": "en",
  "debug": false,
  "urlbase": "./",
  "location": "remote"
}
var trialkey = 'trial key from email goes here...'
reactroot.render(
  <ReExtProvider splash={true} ReExtData={ReExtData} reextkey={trialkey}>
    <App />
  </ReExtProvider>
)

用法 - 示例代码

import React, { useState, useRef } from 'react';
import ReExt from '@sencha/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:'[email protected]',phone:'555-111-1224'},
      {name:'Bart',email:'[email protected]',phone:'555-222-1234'},
      {name:'Homer',email:'[email protected]',phone:'555-333-1244'},
      {name:'Marge',email:'[email protected]',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

运行应用程序

• Create React App：运行 npm start。
• Vite：运行 npx vite --open。

ReExt 组件

ReExt React 组件具有 5 个静态 props（只有 xtype 是必需的）和任意数量的可选事件 props

示例：ReExt Button（按钮）

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

以下是从上面示例到 Ext JS 文档的链接

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

有关 ReExt props 的更多详细信息

• xtype（必需）：组件的 xtype，如 Sencha 文档 中定义。
• className（可选）：要附加到底层 Ext JS 组件的父 div 的 css 类（每个底层 ExtJS 组件都用父 div 包裹，该父 div 的宽度为“100%”，高度为“100%” - 除非在 className 或 style 配置中覆盖）
• style（可选）：要附加到 ExtJS 组件的父 div 的 css 样式。
• references（可选）：如果使用 Ext JS reference，则使用。
• config（可选）：一个 JavaScript 对象，包含组件的 configs（配置），如 Sencha 文档 中定义。
• ready(cmp)（可选）：当底层 ExtJS 组件创建时，由 ReExt 组件触发的事件。此配置的值是 React 宿主组件中的一个函数，参数是创建的 ExtJS 对象。
• storeloaded(store, cmp)（可选）：当与组件关联的异步 store 加载时，由 ReExt 组件触发的事件。
• 'on' props（可选）：与 ExtJS 组件触发的事件对应的 prop；遵循“on”模式，事件的第一个字母大写。（即，button xtype 具有 tap 事件，相应的 prop 是 onTap）。此 prop 的值是 React 宿主组件中的一个函数。

ReExt 配置和事件

ReExt 通过为 ReExt 'xtype' prop 提供一个值来利用 Ext JS 框架组件。此 prop 映射到 ExtJS 文档中的 xtype。您可以在 Ext JS 文档页面的右上角搜索任何 xtype。

例如，经典工具包的 <ReExt xtype="button"/> 映射到 Ext JS 7.8 文档中的此页面：

configs（配置）

configs（配置）选项卡显示 ReExt 'config' prop 的所有有效值。<ReExt xtype="button" config={}/>

events（事件）

events（事件）选项卡显示所有事件 - 要使用，请在事件名称前加上“on”并大写第一个字母

例如，此处是 ReExt 'onClick' 事件的页面 <ReExt xtype="button" onClick={()=>{}}/>

methods（方法）

methods（方法）选项卡 显示可以使用 ReExt ready 事件的 cmp 参数调用的所有方法 <ReExt xtype="button" ready={(cmp)=>{cmp.setText('new text')}}/>

使用 ExtJS Overrides（覆盖）

1. 在 public 文件夹中创建 classicoverrides.js 或 modernoverrides.js。
2. 在此文件中包含所有 override（覆盖）类。
3. 在 ReExtData 对象中设置 overrides: true（仅适用于 location = 'local'）。

示例

var ReExtData = {
    "sdkversion": "7.8.0",
    "toolkit": "classic",
    "theme": "classic",
    "rtl": false,
    "locale:" "en",
    "debug": false,
    "urlbase": "./",
    "location": "local",
    "overrides": true
}

自定义 Ext JS 组件

要使用自定义 Ext JS 组件

1. 使用 Ext JS 定义创建组件（例如，MainList.jsx）。
2. 在您的 React 应用程序中导入并使用此组件。

在 ./app/layout.js` 中

'use client';
import { ReExtProvider } from '@sencha/reext';

export default function RootLayout({ children }) {
  var ReExtData = { 
  sdkversion: '7.8.0', 
  toolkit: 'classic', 
  theme: 'classic', 
  urlbase: './', 
  location: 'local' 
  };
  return (
    <html lang="en">
      <body>
          <ReExtProvider ReExtData={ReExtData}>
            {children}
          </ReExtProvider>
      </body>
    </html>
  )
}

现在可以将自定义 ExtJS 组件作为导入添加。

在 app/personnel/page.js` 中

'use client'
import ReExt from '@sencha/reext';
import { useState, useEffect } from 'react';

export default function Page() {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    const doAsync = async () => {
      try {
        await import('./MainList');
        setReady(true)
      } catch (e) {
        console.error('fail', e)
      }
    }
    doAsync()
  }, []);
  if (!ready) {
    return <div>Loading...</div>
  }
  else {
    return (
      <ReExt xtype='mainlist'
        style={{ flex: 2, border: '1px solid gray' }}
        onSelect={(sender, record) => 
        { 
            console.log('row selected', record[0])
        }}
      />
    )
  }
}

在 ./MainList.jsx` 中

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

在 ./PersonnelStore.jsx` 中

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

许可证

试用