PDA

View Full Version : [CLOSED] [#578] Custom Theming - JavaScript Overrides



tylert
Oct 08, 2014, 5:00 PM
I am continuing my progress on creating a custom theme based on Neptune with a different base color.

I have generated my theme using Sencha Cmd and copied the CSS file and images created into a folder in my Ext.Net application, and pointed the ThemePath to this path. This all works fine.

The problem I'm having now is I don't know how I can include the theme's javascript overrides in my Ext.Net application. I haven't made any specific overrides for my theme, but the Neptune theme itself has several javascript overrides that it uses. For example, one that stood out is the override in Tool.js (in ext-theme-neptune\overrides\panel\) which sets the tool image size to 16x16 (instead of 15x15). My custom theme, which is inherited from Neptune, doesn't get this override in Ext.Net, and my tool icons are cut off by 1 pixel.

What would be the simplest way to apply the Neptune javascript overrides to my custom theme in Ext.Net?

Thanks.

tylert
Oct 08, 2014, 5:46 PM
I found a way to make this work. Please let me know if there is currently a better way to do this.

I made a copy of the ext-theme-neptune.js file from the Ext.NET SVN (under Build\Ext.NEt\extjs\). In this file I replaced every occurrence of "Neptune" with "my-custom-theme" (which is the name of my theme). I included this new javascript file on my page, and now the normal Neptune overrides are working for my theme.

Daniil
Oct 09, 2014, 7:38 PM
Hi @tylert,

I think that is correct that you've done and it looks there is no any better way.

Your question shows that ThemePath is not enough. There should be a way to set a path to a JavaScript file as well.

Currently, we think about the following approach.

<ext:ResourceManager runat="server" ThemePath="one-path.css,another-path.js" />

Just two paths separated with a comma. I will try to get it working and let you know about the result.

tylert
Oct 09, 2014, 8:12 PM
Thanks Daniil. That approach would work for us.

In case this helps anyone else -- there is a better way to get the javascript override file rather than just doing a find and replace on the Neptune file. As you go through the ExtJS theme guide, once you build your theme and test app, the javascript override file will be located here:

\packages\my-custom-theme\build\my-custom-theme.js

Daniil
Oct 22, 2014, 9:18 AM
Created an Issue.
https://github.com/extnet/Ext.NET/issues/578

I've added the .js support for the ThemePath property in the revision #6068 (SVN trunk).

Please use "|" as a delimiter. For example,

ThemePath="some.css|some.js"

Is that helpful for you?