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.
Related
this is my theme style, and I provided that in index.js. but currently my fonts doesn't work !.enter image description here
I've created a sample using Triton theme, but it's menu is not black. When I generate an app with CMD the app with Triton theme has a black menu, like this http://examples.sencha.com/extjs/6.0.0/examples/admin-dashboard/#dashboard
Why are these examples looking different?
When you generate a standard app with Sencha Cmd, it populates it with it's own sample app, including css and a custom theme, which is why you see the colors that you do. if you want to know how the triton theme looks with all it's components then visit:
http://examples.sencha.com/extjs/6.0.2/examples/classic/themes/index.html
In my project there is a requirement to create custom theme. The base color of the components is very light(almost white). The issue is the icons appearing on the header of panels/windows(close, maximize) are almost invisible. What are the sass variables I need to declare so that the images used for these panels and windows are darker(in contrast to white)? And in which scss file do I need to include them?
You will need to replace those images, in ExtJS 5 you can find them at:
YourProjectFolder/ext/packages/your-theme/resources/images/tools/
There you will have two files, tools-sprites.png and tool-sprites-dark.png
You can replace them there if you are using the standard theme or you can save the new image in your custom theme folder path.
Notice that for this to work properly with all browsers, you will have to rebuild your theme using sencha command.
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
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.