ExtJS 5 Custom Theme Testing

2019-08-22 04:55发布

问题:

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

Following http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html 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, ThemeDemoApp is quite poor for testing a custom theme. A panel, tab, button and a modal window. That's it?

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

My question is: How? 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?

回答1:

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)



回答2:

According to advice at How do I include a JavaScript file in another JavaScript file? 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 :-(