[CLOSED] [#578] Custom Theming - JavaScript Overrides

  1. #1

    [CLOSED] [#578] Custom Theming - JavaScript Overrides

    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.
    Last edited by Daniil; Oct 22, 2014 at 9:18 AM. Reason: [CLOSED] [#578]
  2. #2
    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.
  3. #3
    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.
  4. #4
    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
  5. #5
    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?

Similar Threads

  1. [CLOSED] Custom ExtJS Theming
    By tylert in forum 2.x Premium Help
    Replies: 6
    Last Post: Oct 10, 2014, 9:08 PM
  2. [CLOSED] Problem with client overrides
    By vadym.f in forum 1.x Premium Help
    Replies: 2
    Last Post: Apr 18, 2013, 3:35 PM
  3. Helpful Panel javascript overrides for 2.x
    By jchau in forum Examples and Extras
    Replies: 2
    Last Post: Feb 15, 2013, 3:02 PM
  4. [CLOSED] alignTo not working when doing custom theming
    By randy85253 in forum 1.x Premium Help
    Replies: 5
    Last Post: Aug 05, 2009, 6:21 PM
  5. Where to put overrides and extensions ideally
    By sz_146 in forum 1.x Help
    Replies: 4
    Last Post: Dec 05, 2008, 8:00 AM

Tags for this Thread

Posting Permissions