I'm using Ext JS and Sencha CMD and want to experiment with a few themes.
Also I have read that the theme for an app can be changed in app.js(using theme property) and sencha.cfg(using app.theme property) and then run sencha app build.
I would like to know,
Why are this configurations in two different files?
And Which is the correct way of doing this?
In ExtJS 5, the correct way to specify your application's theme is via the app.json file, as described in the documentation.
The sencha.cfg method also works, but is there to support migration from older versions of ExtJS.
Both are corrects ways to define the theme. However, it's better to have the theme defined in app.json. You'll anyway have a theme default defined in sencha.cfg -
app.theme=ext-theme-classic
What you define in app.json as
"theme": "my-theme"
will override what is defined in sencha.cfg
Refer the doc for clarity - http://docs.sencha.com/cmd/5.x/microloader.html
Related
I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.
But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").
Is there any way we can customize the theme in Semantic-UI-React? Thanks in advance!
This link may also help in addition to the theming page on the docs site.
https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/
It has a setup script after you run
npm install --save-dev semantic-ui
Yes there is a way to customize themes and create your own
https://react.semantic-ui.com/theming/
Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.
One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables. Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.
https://semantic-ui.com/usage/theming.html#browsing-for-themes
What is the best practice to use overrides in extjs 6.2 application. How to make all files inside override folder require by default. In 4.2 we use to set it overrides path in sencha.config and in application requires section we used to mention overrides.*.
I tried the same with 6.2 but i failed to configure. When i mention override option one by one in application requires section it works like 'overrides.Ajax' but when try to make entire override like 'overrides.*' it does not work.
After creating override we need to build or refresh the application using sencha command. When i did sencha refresh all the override files are included by default.
In my Extjs app I have kept custom.css file in the resources folder of the root for testing and in the build- resources folder. And add the css path to two both index.html files(test and build). But whenever I make it to convert to build production, index.html file overwrites and custom.css file finds missing. Somewhat problematic it is. I know that this is because I add this file externally. But Is there any permanent solutions to fix this, without violating the Extjs app structure ??
You can add your custom styles via scss. There are several articles around the web about styling your ExtJS app.
http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html
http://www.rallydev.com/community/engineering/guide-custom-themes-extjs-4 [dead link]
If you only want to add your single custom css file - which i do not recommend - you can do things like that:
Include an existing CSS file in custom extjs theme
http://www.sencha.com/forum/showthread.php?270694-How-to-include-custom-components-CSS-in-build-CSS
I have to create a custom stylesheet for my ExtJS application. I have created it using sencha command and by modifying Package/MyCustomTheme/sass/etc/all.scss file. It has changed the base colors etc of the application and panels. When I am including a combobox on my page, it does not seem to have any style applied to it. What variables I need to include in the .scss file for combobox? What is the correct way to change the style of all the components used in the application?
If you have a custom theme, built with secha app build, and then you add a new component that needs extra css rules, you have to rebuild your app before the css for that component gets included in the css of your custom theme.
I'm not sure if I'm clear:
Build your app with custom theme with sencha app build
Include a new component class (Ext.form.field.ComboBox in your case).
Now the css file of your custom theme will miss the combobox css rules.
Rebuild your app with sencha app build
Your css theme files are now complete and everything's OK.
I want to have neptune toolbar on classic themed ExtJS website.
Is this thing possible ? If so , How ?
You could create a custom theme derived from a classic theme and you could copy the toolbar styles to your custom theme folder.
sencha generate theme my-custom-theme
Then, on your project's config file found on project folder/.sencha/app/sencha.cfg, edit/add the following:
app.theme=my-custom-theme
#app.theme=ext-theme-classic
I assume you have generated your project through Sencha CMD. Copy the toolbar styles found on packages/ext-theme-neptune/sass/var/toolbar and/or packages/ext-theme-neptune/sass/src/toolbar to your custom theme.