![](\"https://reextdemo.vercel.app/ReExt/ReExt.png\")
\n\n### Unleash the power of Sencha Ext JS components in React\n\nReExt enables the integration of Sencha Ext JS components into React applications.\n\nIt bridges between React and the robust Ext JS framework, allowing you to leverage an extensive library of UI components and tools within your React environment.\n\n### Table of Contents\n1. [ReExt Examples](#reext-examples)\n2. [Quick Start ](#quick-start)\n3. [Step by Step Guide](#step-by-step-guide)\n4. [Installation](#installation)\n5. [Installing the Sencha ExtJS SDK](#installing-the-sencha-extjs-sdk)\n6. [Aquiring a Licensed Version of Ext JS](#aquiring-a-licensed-version-of-ext-js)\n7. [ReExt Trial Key](#reext-trial-key)\n8. [Documentation](#documentation)\n9. [Using ExtJS Overrides](#using-extjs-overrides)\n10. [Using Custom Ext JS Components](#using-custom-ext-js-components)\n11. [Version History](#version-history)\n\n\n\n## ReExt Examples\n\nExamples using modern toolkit and material theme\n\n\n\n## Quick Start\n### (takes less than 1 minute to run)\n\nNote: Quick Start assumes npm is installed. To install npm, install Node.js\n\nThe commands can be run all at one time. \n\n### MacOS\n\nCopy and paste the commands below into a MacOS terminal window bash prompt.\n\n#### Vite\n\n```bash\nnpm create vite@latest reextvite -- --template react --no-interactive\ncd reextvite\nnpm install @vitejs/plugin-react\nnpm install @sencha/reext@latest\ncp node_modules/@sencha/reext/example/vite.config.js vite.config.js\ncp node_modules/@sencha/reext/example/App.jsx src/App.jsx\ncp node_modules/@sencha/reext/example/main.jsx src/main.jsx\ncp node_modules/@sencha/reext/example/ReExtData.js src/ReExtData.js\ncp node_modules/@sencha/reext/ReExt/ReExt.png public/ReExt.png\nnpx vite --open\n```\n\n#### Vite (testing)\n\n```bash\nnpm create vite@latest reextvite -- --template react --no-interactive\ncd reextvite\nnpm install @vitejs/plugin-react\nnpm install ../../ReExt/publish/ReExt/zips/sencha-reext-1.2.75.tgz\ncp node_modules/@sencha/reext/example/vite.config.js vite.config.js\ncp node_modules/@sencha/reext/example/App.jsx src/App.jsx\ncp node_modules/@sencha/reext/example/main.jsx src/main.jsx\ncp node_modules/@sencha/reext/example/ReExtData.js src/ReExtData.js\ncp node_modules/@sencha/reext/ReExt/ReExt.png public/ReExt.png\nnpx vite --open\n```\n\n\n#### Next.js with JavaScript\n\n```bash\nnpx create-next-app@latest reextnext --js --eslint --no-tailwind --no-src-dir --app --import-alias \"@/*\"\ncd reextnext\nnpm install @sencha/reext@latest\ncp node_modules/@sencha/reext/dist/example/next.config.mjs next.config.mjs\ncp node_modules/@sencha/reext/dist/example/layout.js app/layout.js\ncp node_modules/@sencha/reext/dist/example/page.js app/page.js\nnpm run dev\n```\n\n#### Next.js with TypeScript\n\n```bash\nnpx create-next-app@latest reextnext --ts --eslint --no-tailwind --no-src-dir --app --import-alias \"@/*\"\ncd reextnext\nnpm install @sencha/reext@latest\ncp node_modules/@sencha/reext/dist/example/next.config.mjs next.config.mjs\ncp node_modules/@sencha/reext/dist/example/layout.tsx app/layout.tsx\ncp node_modules/@sencha/reext/dist/example/page.tsx app/page.tsx\nnpm run dev\n```\n\n### Windows\n\nCopy and paste the commands below into a Windows command prompt.\n\n#### Vite\n\n```bash\nnpm create vite@latest reextvite -- --template react --no-interactive\ncd reextvite\nnpm install @vitejs/plugin-react\nnpm install @sencha/reext@latest\ncopy /Y node_modules\\@sencha\\reext\\example\\vite.config.js vite.config.js\ncopy /Y node_modules\\@sencha\\reext\\example\\App.jsx src\\App.jsx\ncopy /Y node_modules\\@sencha\\reext\\example\\main.jsx src\\main.jsx\ncopy /Y node_modules\\@sencha\\reext\\example\\ReExtData.js src\\ReExtData.js\ncopy /Y node_modules\\@sencha\\reext\\ReExt\\ReExt.png public\\ReExt.png\nnpx vite --open\n\n```\n\n\n# Step by Step Guide\n\n## Create a React application\n\n### vite\nhttps://vitejs.dev/guide/\n\n```bash\nnpm create vite@latest reextvite -- --template react\n```\n\n## Installation\n\nUse the package manager [npm](https://npmjs.com) to install ReExt.\n\n```bash\nnpm install @sencha/reext\n```\n\n## Installing the Sencha ExtJS SDK\n\n### IMPORTANT-EXTJS FRAMEWORK REQUIREMENT:\n\nReExt is dependent on Sencha ExtJS, and to run the framework locally you must have the framework installed in the public folder of your React project.\n\nThe Quick Start application is configured to run the Sencha ExtJS version 8.0.0 Trial from a remote server.\n\nThis is for demo purposes only and is not configured for Licensed development.\n\nA licensed Commercial version of the framework can be acquired from the Sencha Support Portal.\n\nReExt can be configured to use any commercially available version of the Sencha Ext JS framework (7x and above).\n\nFor more information, contact us at sales@sencha.com.\n\nReExt has been tested with the latest version of the Sencha Ext JS framework, which at the time of this publishing is Sencha ExtJS version 8.0.0.\n\nTo purchase a commercial version of Sencha ExtJS, go to https://store.sencha.com/.\n\n\n### Aquiring a Licensed Version of Ext JS\n\nTo acquire a licensed version of Ext JS: \n\n1. login to the Sencha Support Portal at https://support.sencha.com/\n\n2. Click the downloads menu on the left side of the page - the Sencha Downloads page will display.\n\n3. Click the 'Downloads' button - the 8.0.0.zip file will be downloaded (which is the latest version of Ext JS).\n\n4. In the file system where the 8.0.0.zip file has been downloaded, unzip the file. \n\n5. A folder named ext-8.0.0 will be created.\n\n6. Copy the ext-8.0.0 folder to a common folder on your computer (used for Ext JS sdk's) and set the \"sdkfolder\" property in ReExtData to that folder.\n\n7. In ReExtData.js in your src folder of your React application, confirm the sdkfolder is correct and change to the following (\"location\": \"local\").\n\n```js\nconst ReExtData = {\n\tsdkversion: \"8.0.0\",\n\ttoolkit: \"modern\",\n\ttheme: \"material\",\n\trtl: false,\n\tlocale: \"en\",\n\tdebug: false,\n\turlbase: \"./\",\n\tsdkfolder: \"