12677

ExtJS 5 Custom Theme Testing

Question:

I recently started to create custom theme for ExtJS 5 by Sencha.

Following <a href="http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html" rel="nofollow">http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html</a> I managed to create ThemeDemoApp, inherit ext-theme-neptune, change $base-color to green and refresh/rebuild ThemeDemoApp with my-custom-theme. All ok.

My problem is, <strong>ThemeDemoApp is quite poor for testing</strong> a custom theme. A panel, tab, button and a modal window. That's it?

After bit of googling I bumped into <a href="http://dev.sencha.com/ext/5.0.0/examples/themes/index.html" rel="nofollow">http://dev.sencha.com/ext/5.0.0/examples/themes/index.html</a>. (Why isn't this mentioned in the guide?!) Heading says: <strong>View and test every Ext component against bundled Ext Themes, or your own custom themes.</strong>

My question is: <strong>How?</strong> How do I test my own custom theme against this example? Do I have to dig into the source (themes.js) and build such page/application myself?

Answer1:

The examples - including the Theme tester - is included in the ExtJS download.

You can modify the list of themes available by editing the shared/options-toolbar.js file.

To get it to find your theme, you'll either need to name it similar to the others (ext-theme-name), or modify themes.js accordingly.

Or you could just hack the theme.js file to hardcode your theme.

(Ext JS 4 used to create an example page for themes automatically - it doesn't seem to do that now, though)

Answer2:

According to advice at <a href="https://stackoverflow.com/questions/950087/" rel="nofollow">How do I include a JavaScript file in another JavaScript file?</a> I decided to load both options-toolbar.js and themes.js (with just minor modification - commenting out Ext.onReady(...) function in themes.js) and I used functions getBasicPanel(), getCollapsedPanel(), etc. in my own application to create the same testing page (absolute-layout container that fits the page).

Anyhow, I guess Robert's answer is the correct one - there is no prearranged, ready-to-use functionality from Sencha :-(

Recommend

  • Keyboard appears in wrong orientation in ios
  • Adobe AIR lag on high resolution Android devices
  • How to keep List contents on the first page? (SSRS 2005 - PDF Export)
  • I've been taught not to place most methods in a general “System” class but where do they go ins
  • Casting pointers to larger structs to pointers to smaller structs
  • Is it possible to use Microsoft 2013 sharepoint search server as my search engine for my site
  • Inline “required” asterisk in Laravel form label
  • Errno::ECONNREFUSED No connection could be made because
  • Are there any supported high bit-depth video or image formats in DirectShow
  • Cassandra: What is a subcolumn
  • jQueryUI dialog replacement for confirm?
  • CSS: How to fix overlapping divs
  • How to remove all of a jQuery UI dialog when it is closed
  • getelement by class name for clicking
  • How can I make this modal persistent?
  • perl, mysql - fasting way to upload a csv file into mysql?
  • Why use database factory in asp.net mvc?
  • Installing iPhone App to iPhone
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • Allowing both email and username for authentication
  • Alert pop up with LWUIT
  • Android fill_parent issue
  • ImageMagick, replace semi-transparent white with opaque white
  • Get one-time binding to work for ng-if
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Installing Hadoop, Java Exception about illegal characters at index 7?
  • Finding past revisions of files in StarTeam w/ .NET SDK / C#
  • Join two tables and save into third-sql
  • sending/ receiving email in Java
  • How to model a transition system with SPIN
  • ORA-29908: missing primary invocation for ancillary operator
  • How do you troubleshoot character encoding problems?
  • jquery mobile loadPage not working
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Arrays break string types in Julia
  • AngularJs get employee from factory
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Django query for large number of relationships
  • Converting MP3 duration time