PDA

View Full Version : Changing theme from ext-theme-classic to ext-theme-neptune breaks application



weisser
26 Jun 2014, 3:45 AM
Hello,

I am working with Sencha Cmd v4.0.2.67, ExtJS 4.2.1.883 and DeftJs 0.8.0
The application works with the ext-theme-classic, generating a build creates the application in build/production, wich works also.

I changed the theme to ext-theme-neptune via editing sencha config:

app.theme=ext-theme-neptune
and adding the theme to the requirements of app.json

...
"requires": [
"ext-theme-classic"
],
...

Then refreshing and rebuilding the app, wich works without errors:

sencha app refresh
sencha app build

After that the application does not work in the development environment anymore.
But the build result in build/production/ will do and showing the new theme.

Unfortunately the browser console does not show any errors or warnings.
I assume, that some requirements are not set properly because the Ext.onReady() method will not called and the extJS documentation for Ext.onReady says "...Adds a function to be called when the DOM is ready, and all required classes have been loaded.".

I have no idea wich requirement is not fullfilled, the browser console shows no errors.

So, is there a way to detect, wich class is missing in the requires statement of the application class? Is some step missing in my theme changing procedure?

Best Regards
Nico

Additional Info:
Testing different browsers. The application runs in development environment correctly for IE10, IE11, FF27.0, but not in Chrome 35.0 , IE8, IE9

weisser
29 Jun 2014, 10:56 AM
After a lot of debugging I have found out that the files in the ext-theme-neptune/overides folder are loaded previous to the extJs File of the classes they are extending. Changing the load order leads to the expectiv behaviour.


More detailed:

The command "sencha app refresh" adds for each javascript file in the ext-theme-neptune/overrrides folder an "Ext.Loader.loadScript" statement in the bootstrap.js File.

A look to firebugs network tab shows, that the theme files are loaded previous to the extJS core files. It seems that for the LoadScript commands the Ext.Loader.triggerReady() method will not called and so the Loaders isLoading flag never will be false. But I've not figured out why.

To change the loading order I've added all overriding theme classes to the requires statement of my Application:




Ext.define("NAC.Application",
{
extend: "Deft.mvc.Application",
requires:
[
, "Deft.mvc.Application"
, "Deft.Deferred"
, "Deft.Injector"

//----8<-snip----------------------------------
//-- This section is required for some browsers in development mode
//-- accessing the NAC/index.html file. For these browser open NAC/bootstrap.js
//-- and uncomment the matching Ext.Loader.loadScript statements
, "ExtThemeNeptune.toolbar.Toolbar"
, "ExtThemeNeptune.toolbar.Paging"
, "ExtThemeNeptune.panel.Table"
, "ExtThemeNeptune.panel.Tool"
, "ExtThemeNeptune.panel.Panel"
, "ExtThemeNeptune.container.ButtonGroup"
, "ExtThemeNeptune.resizer.Splitter"
, "ExtThemeNeptune.tab.Tab"
, "ExtThemeNeptune.layout.component.Dock"
, "ExtThemeNeptune.menu.Menu"
, "ExtThemeNeptune.menu.Separator"
, "ExtThemeNeptune.form.field.HtmlEditor"
, "ExtThemeNeptune.picker.Month"
, "ExtThemeNeptune.grid.RowEditor"
, "ExtThemeNeptune.grid.column.RowNumberer"
, "ExtThemeNeptune.Component"
//---->8-snap----------------------------------
...

Then run the build commands "sencha app refresh" and "sencha app build"

After that uncomment the LoadScript statements for the theme files from the bootstrap.js file. This will load the theme classes files after the core extJs files and calling the application via the index.html file in the applications folder works.

Of course, modifying the bootstrap.js right after the build command is not a clean approach, but I was not able to find another solution. Maybe anyone else has some idea how to get this working.


Greetings,
Nico

weisser
30 Jun 2014, 6:51 AM
For the automation of the bootstrap.js modification I've add an ant task for the "-after-build" target in the build.xml:

<target name="-after-build">
<echo level="info" message="Comment all ext-theme-neptune loadScript commands in ${basedir}/bootstrap.js..."/>
<replaceregexp file="${basedir}/bootstrap.js"
match="(Ext\.Loader\.loadScript\(.*lib\/extjs\/packages\/ext\-theme\-neptune.*)"
replace="//\1"
byline="true"
/>
</target>