Ext JS Theme Application Guide (Sencha ReExt)
1. Overview
This article describes how to apply a purchased theme in a project that consists of a Re Ext environment.
Sencha NPM requires Node 16 to run.
Please visit the site below to install Node16 for your OS and proceed.
https://nodejs.org/en/download
Applying a theme requires a few steps.
- Check The License Code
- Open The ExtJS Project
- Apply ReExt LicesneMode
- Apply Purchase Theme
- Apply indexHtmlFile
0. Check The License Code
If you have purchased a theme, you should have received an email like this.
If you don't receive it, please contact us at support@ext-ui.com
In order to apply the theme, you will need the following items
- Theme Name
- License Key
This article assumes that you have purchased the theme-mercury-dark (Mercury Dark).
1. Open your ExtJS project
See the link below for ReExt project settings
(https://docs.sencha.com/reext/guides/getting_started.html)
When ReExt setup is complete, the following screen appears.
Result
2. Apply ReExt Local ExtJS SDK
To apply the theme you purchased, you must change the SDK to Local rather than Remote.
Visit Sencha Support and download ExtJS 7.8.
https://support.sencha.com/#download
Unzip the downloaded file.
Move the folder (ext-7.8.0) to the ReExt project public folder.
Edit main.jsx
.
.
import React from 'react'
import ReactDOM from 'react-dom/client'
import {Fill, ReExtProvider} from '@sencha/reext'
import App from './App'
Fill();
var reactroot = ReactDOM.createRoot(document.getElementById('root'));
var ReExtData = {
"sdkversion": "7.8.0",
"toolkit": "classic",
"theme": "classic",
"packages": {
"charts": false,
"fontawesome": false,
"ux": false,
"calendar": false,
"d3": false,
"exporter": false,
"pivot": false,
"pivotd3": false,
"pivotlocale": false,
"froalaeditor": false
},
"rtl": false,
"locale": "en",
"debug": false,
"urlbase": "./",
"location": "local", //Change location
"overrides": false
}
reactroot.render(
<React.StrictMode>
<ReExtProvider ReExtData={ReExtData} splash={true}>
<App/>
</ReExtProvider>
</React.StrictMode>
)
.
.
.
3. Applying Purchase Theme
Unzip Purchase Theme File Move Purchase Theme File
Copy Folder
theme-mercury-dark/build --> reextvite/public/ext-7.8.0/build/classic
Rename
reextvite/public/ext-7.8.0/build/classic/build --> reextvite/public/ext-7.8.0/build/classic/theme-mercury-dark
reextvite/public/ext-7.8.0/build/classic/theme-mercury-dark/theme-mercuydark.js --> reextvite/public/ext-7.8.0/classicoverride.js
For Example
- Purchase Theme : theme-mercury-dark
- Apply Theme : mercury-dark
.
.
.
var ReExtData = {
"sdkversion": "7.8.0",
"toolkit": "classic",
"theme": "mercury-dark",// remove prefix theme-
"packages": {
"charts": false,
"fontawesome": false,
"ux": false,
"calendar": false,
"d3": false,
"exporter": false,
"pivot": false,
"pivotd3": false,
"pivotlocale": false,
"froalaeditor": false
},
"rtl": false,
"locale": "en",
"debug": false,
"urlbase": "./",
"location": "local", //Change location
"overrides": true // Overrides true
}
.
.
.
.
4. Applying LicenseCode
0. In the Check The Licence Code section, you can enter the information provided.
- Theme Name
- License Key
Edit index.html
. . . <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + React</title> <script type="text/javascript"> var Ext = Ext || {}; <!-- Ext['Theme Name'] = 'LicenseKey'; --> Ext['theme-mercury-theme']='Using_this_{theme-mercury-light}_license_k.........' } </script> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> . . .
