Sencha Cmd and extensible

[jhelfert]

I am trying to get Sencha Cmd 3.1.2 to work with extjs 4.2.1 and extensible 1.5.2.

First off, the library fails to parse with the cmd tools. You cannot use ternary operators and such inside of the "requires" array definition. There are also issues with CalendarMappings and EventMappings, because these are .js files that are used in requires definitions but are not Ext classes (not 100% sure what proper solution is, I just made them into simple classes).

I have patched these files to get passed parsing, but it seems the library still doesn't compile properly with the cmd tools. As my page loads, Extensible.calendar is not defined, so I get errors like : "cannot read property view of undefined".

I have tried to go back and use extensible-all, but then I must load extjs before extensible, and extensible before my app. But my app is compiled with ext...so I have a catch 22.

Any solutions to this predicament? Right now I think I'm forced to use an old version of the build tools to make it happen.

I can provide source code if there is anything that would be helpful.

[brian.moeskau]

Yeah I'm well aware of this, and it's a sticky issue. The ternary ops in the requires was only added as a very ugly hack due to backwards-incompatibilities introduced by the Sencha guys in 4.1 or 4.2. While my goal all along has been to keep a pretty liberal version support policy (back to 4.0.1 currently) it's quickly getting to the point where I'm only practically going to be able to support the latest minor versions the way Sencha consistently breaks stuff in minor releases. Sencha Cmd has also changed drastically over time, which adds even more complexity.

Unfortunately I haven't had the time to go back and address this in a systematic way yet, but I do understand that it's a significant issue. I spent a couple of hours on it after the other thread about this was first raised, and I was not able to solve the Cmd compile issues without breaking other stuff I need as the framework author (e.g. support for <4.1). I'm currently working on pushing out a new release of 1.6, and I'll try to look at the Cmd stuff again ASAP.

[brian.moeskau]

Can you show me how you're trying to run Cmd and pull Extensible into your app? Right now I'm trying to figure out the best way just to test this out without having to build a full-blown Extensible-specific Cmd package. I may try to go down that road at some point, but not prepared to do it right now. However I would like to address the basic build issues if possible.

[behemott]

I get the same problems trying to evaluate Extensible with our application Ext 4.1.3/Extensible 1.6.0-b1/Cmd 3.1.2.

Initially I tried the following:

Code: Select all

sencha compile --ignore=diag -classpath ..\..\extjs\extjs-4.1.3\src,js\extensible-1
.6.0-b1\src,app.js,app,override concatenate --output-file=app-all.js

and got the following errors for EventMappings, CalendarMappings and RecurrenceMappings:

Code: Select all

[ERR] C2008: Requirement had no matching files (Extensible.calendar.data.CalendarMappings) --
.\js\extensible-1.6.0-b1\src\calendar\data\CalendarModel.js:4768
[ERR] Failed to find any files for .\js\extensible-1.6.0-b1\src\calendar\data\CalendarModel.js::ClassRequire::Extensible.calendar.data.CalendarMappings

Then I used the John's way, but the compiled file failed with the same "cannot read property xxx of undefined".

Playing further I nearly got it working with

Code: Select all

sencha compile --ignore=diag -classpath ..\..\extjs\extjs-4.1.3\src,js\extensible-1
.6.0-b1\lib\extensible-all.js,app.js,app,override concatenate --output-file=app-all.js

There is a warning about circular reference

Code: Select all

[WRN] C1009: Circular reference in requirements chain (
extjs-4.1.3\src\dd\DropTarget.js ->
js\extensible-1.6.0-b1\lib\extensible-all.js -
extjs-4.1.3\src\dd\DropZone.js ->
extjs-4.1.3\src\dd\DropTarget.js
)


but the application runs, the calendar looks working except resizing - shims aren't shown, endDate is not calculated.

I hope this info could help to get it finally working,
Alexej Lantuchov-Lukasheika

[UPDATE]
I've tried the approach above on another computer with the same versions of Ext, Extensible and Cmd and it works even without warnings and issues described.

[brian.moeskau]

OK, I have some good news to report. After a few changes, I have the latest version of Extensible building with Sencha Cmd 3, though with some caveats. I plan on getting this so that it can be fully automated, but for now at least, if you must use Cmd v3 today, this should get you going.

TL;DR

The latest code in Github (and shortly, 1.6.0 RC) now builds with Cmd. There are a few manual steps required at this time (this assumes an app structure generated by Cmd):

One-time setup per application:

• Modify your index.html file's <x-bootstrap> section to include the Extensible.js file after Ext is included, e.g. <script src="/extensible/src/Extensible.js"></script>. Note that this should be the Extensible class file from the src folder, not a pre-built extensible-all file. It is only used to bootstrap the loading of Extensible's classes.
• Update your .sencha/app/sencha.cfg file to include Extensible's /src folder (wherever you have it on your system) in the app path, e.g.:

Code: Select all

app.classpath=${app.dir}/../Extensible/src,${app.dir}/app,${app.dir}/app.js

IMPORTANT: Apparently now as of Cmd 4.x, the classpath order matters, and it seems that Extensible's path MUST be included before the app path, or else the Extensible class will be overwritten during the build process.

That should be all that's required to get the app compiling with Extensible.

Fix Extensible resources (to be done after each build):

• Copy extensible-all.css from the Extensible distribution into your app's /build/[app]/[environment]/resources folder and put it into its own subfolder called "css" (name doesn't really matter, it just needs to be in a subfolder for its image paths to work by default)
• Copy the Extensible resources/images/default folder to your app's /build/[app]/[environment]/resources/images folder
• Modify the generated index.html to include the Extensible stylesheet you just copied over, e.g. <link rel="stylesheet" href="resources/css/extensible-all.css"/>

With that, your compiled app should be working with the calendar. If you run into any issues or I've left anything out, please let me know. I realize this is not ideal, and I'm going to try to write a script to automate this last section, but for now at least it will get you going.

More Details, if you're interested

The basic issue with the Mappings classes is that Cmd doesn't like them, but any way that you try to change the classes directly (by wrapping them in Ext.define), while making Cmd happy, breaks the mapping logic. I spent a while on this, and never could figure out an appropriate fix that would preserve API compatibility (that's the key). The long-term fix will be to refactor and/or remove those classes, but that will have to be in 2.0 as it will not be backwards-compatible. The good news is that I've learned about a Cmd-specific annotation you can add to a file to force Cmd to treat something as a proper Ext class, even if it isn't:

Code: Select all

// @define Extensible.calendar.data.EventMappings

With that, the mappings work correctly with Cmd and do not break the calendar -- easy enough! I also removed a handful of old unused classes that Cmd was complaining about, as well as removed the conditional requires hacks I had in place from the Ext 4.1.0 release (Sencha appears to have fixed the issues I was having at that time). With those changes, I am able to successfully both compile (sencha compile concatenate myapp.js) and build (sencha app build).

The main issue with getting the resources to work automatically with Cmd is that Extensible still uses basic CSS (no SASS yet) and the old pre-Ext 4 image structure, so Cmd doesn't recognize them as things it knows how to manage. It should be easy to fix, but will require reorganizing the resources folder in a way that I do not want to do until 2.0, again because it could potentially cause problems for anyone who relies on the current structure in their app.

For Extensible 2.0, I plan to make the changes necessary to generate a Sencha-formatted package. That way anyone using Cmd will simply be able to require Extensible as a dependency of their application and Cmd will magically pull it in and build everything correctly. Until then, at least there's a manual workaround.

[cavallari74]

Extensible.js placed just below ext-dev.js and compiled code, build my returned the following error when adding calendar:
"Can not read property 'data' of undefined"
tks

[brian.moeskau]

Extensible.js placed just below ext-dev.js and compiled code, build my returned the following error when adding calendar: "Can not read property 'data' of undefined"

This is a runtime error, not a problem with Sencha Cmd, correct? It typically means that your data mappings are not set up correctly, or the data returned from the server is not formatted as expected. If you need help with that, please post a new thread in the Help forum.

[miroperez]

When do you expect that 1.6.0 will be released for production use?

If it's still a couple of months away is there any work around for 1.5.2 (even if I have to change the src then track it until 1.6 is available).

Miro

[brian.moeskau]

I can't give an exact time frame (though it should be weeks, not months). I believe these were all the commits related to fixing Cmd support:

https://github.com/bmoeskau/Extensible/ ... f77f3a69fd
https://github.com/bmoeskau/Extensible/ ... 19bfd3fe1f
https://github.com/bmoeskau/Extensible/ ... 277303ff20

[leclercb]

Same error...
Uncaught TypeError: Cannot read property 'view' of undefined

The problem is in Extensible.calendar.view.Day:
At line :
this.ddCreateEventText = this.ddCreateEventText || Extensible.calendar.view.AbstractCalendar.prototype.ddCreateEventText;

Is there anyway to fix this ?