I am using sencha sdk tool 2 to build my extjs 4 application. Build is working fine and it generated two files -
app-all.js - minified
all-classes.js - non-minified
But when I am using minified app-all.js with ext.js in my index-mini.html page it is not working and giving me the error "Cannot read property 'get' of undefined" at Ext.util.Cookies.get()
My application is working fine when I am using ext-all.js instead of ext.js.
I saw that my application is using some util classes(like - Ext.util.Cookies) that are not present in ext.js. Also for development we are using ext-all.js in our index.html but for deployment we want to use ext.js.
Questions -
How can I run my application using ext.js & app-all.js?
-
Thanks in advance.
The problem is that ext-all.js (and the un-minified ext-debug.js) only provide the minimum number of core ExtJS classes needed to get up and running. Any additional classes should be dynamically loaded as separate files
Section 2.2 of Getting Started describes this, and also explains that you should dynamically load any additional classes.
Basically, you need to include a requires statement in your application as shown below.
requires:[
'Ext.util.Cookies'
],
Related
We have an ExtJS modern app. We would like to use cmd to minimize/compress our code into a single .js file - effectively doing what a non Ext app would do with other minifiers like uglifyjs or terser.
I believed we could achieve this with the compile command such as:
sencha -sdk ext-7.1.0.46 compile -cl=myclassfolder -inp=ES6 concat outfile.js
However, it complains that it can't find the Ext classes with an error like:
[ERR] Failed to resolve dependency Ext.data.Model for file myapp.model.mymodel
[ERR] Unknown definition for dependency : Ext.data.Model
It seems to be the basic task of extending Ext.data.Model it doesn't like and very much feels like I simply need to reference the extJS class structure correctly for this to work, but can't figure out the command line to make it happen (I somewhat assumed that the sdk reference would fix this).
Is this possible?
Ok, to help anyone who is facing the same problem and wants to compress/minify their ExtJS but without creating a full sencha app.
The command is fairly simple and the answer is to include the path to your dependent js files in the -cl (or -classpath) argument, then exlude the Ext namespace:
sencha -sdk stack/Sencha/ext-7.2.0 compile -cl=ext-modern-all.js,packages/ux/modern/ux.js,myclassfolder -inp=ES6 exclude -namespace Ext and concat outfile.js
You can then use terser or your preferred minify tools to minify/mangle the output (or add the compress command to the above to allow cmd to minify also). It's a reasonable way to build your ExtJS code into several manageable extjs "modules" which can be loaded when needed (or when security allows) rather than the "big bang" approach of cmd.
This will produce a single js file, correctly ordered, the only issue is that it includes the Ext microloader code, which it adds by default. I have not managed to have the compiler not inlcude the microloader, however you can effectively disable it by defining the microloader yourself between the load of your ext-all.js file and your newly created file by using something like this is another file or inline script tag:
Ext.Microloader = {
run: function(){}
};
I know there aren't many folks left using ExtJS, hope this helps someone at some point, at worst case it allows a bit more control of the ExtJS build process.
I am developing ionic application using mfp 7.1. I have to obfuscate theapplication, for that I have refer the following link,
https://www.ibm.com/support/knowledgecenter/SSHS8R_7.1.0/com.ibm.worklight.deploy.doc/admin/t_pg_creating_obfus_cli.html
Using the above link I have done with the following steps:
1) In the project.properties file uncommented the line
proguard.config=proguard-project.txt.
2) Created keystore file and its added in the "ant.properties" file.
3) finally, we build the application.
We unable to get the "mapping.txt" file in the project
& also not able to get obfuscate code.*
Can any one tell me how to obfuscate it??
Anyone help will be Appreciated!!!
Proguard obfuscation will work on native code. You mention an Ionic application. As such you should try Javascript obfuscators for your application:
Google Closure
Compiler YUI Compressor
UgifyJS
More details here.
Within MFP, the options available are to perform JS and CSS concatenation and minification. The other options are outside of MFP and needs to be done using the respective tools.
I minified/built my app that uses ExtJS 4.2.0 (free version) using Sencha SDK Tools 2.0.0 beta3, and the app was built successfully. However, when I try deleting the old "app" folder containing my old classes, the app no longer works.
I also tried generating a new app using Sencha CMD 4.0.1.45 and then adding my classes, but the results are the same.
I am confused why this happens, because as I understood it, your old classes are not needed to deploy production app. In fact, the only javascript files you need to include in your "index.html" file are "ext.js" and "app-all.js".
I used Firebug and saw in the DOM that the app, along with my classes, are loaded.
I also noticed that "app-all.js" defines classes like this:
Ext.define("MyApp.view.MyClass"...
Is this really how it is supposed to behave? or am I missing something?
Thanks in advance!
Okay, I got it. A .js file in my application calls Ext.require on itself, causing the app wiring go crazy.
I am new to EXT JS environment. I am working on a dynamic java project in eclipse indigo where i want to use ext-js calendar in one of my jsp.I saw the EXT_JS calendar demo from downloaded 'ext-4.1.1' sdk(index.html file in ext-4.1.1a\examples\calendar).
I want to create a .js file as like ext-js calendar page. So for that i followed the path given in
http://loianegroner.com/2010/11/spket-setting-up-eclipse-ide-for-ext-js-and-jquery-development/ to integrate ext-js in eclipse.
But now when i copy index.html to my webcontent folder then it is not working(Originally it is showing nothing). But when i copy the entire ext-js source code to my workspace web content then running the index.html file in example/calendar folder of ext-4.1.1a giving me required result.But I don't think this as a solution.
I could not find any way also how to start to do my task.
So Pls anybody help me here...
Regards :
Dev
When nothing shows up on the screen, it is commonly a case where the ExtJS library isn't loaded. Without seeing the code, it's hard to pinpoint the issue.
Using Chrome Dev tools or Firebug for Firefox, take a look at the console and/or network output.
The files you're looking for will be included in the <head> section of your index.html. There should be ext-all.js or possibly ext-all-debug.js at a minimum, plus the style sheets.
If this is your issue, then you need to include the proper paths to the ExtJS library. This can be the local installation, or you can use a CDN. For example:
<script src="http://cdn.sencha.com/ext-4.1.1-gpl/ext-all.js"></script>
When I 'compile' my extjs MVC app (version 4.1.1a, CMD ver 3.0.2.288), an all-classes.js file gets created however none of my custom code (controllers, views etc) gets included. They get dynamically loaded when I load the html page. I have another app that works fine. I can't post my hundreds of lines of code. What can I look for?
I tried the CMD build in debug mode and it seems to process and find all my app files, it just doesn't include in all-classes.js.
I tried
sencha -d app build
and
sencha compile -classpath=app/app.js,app,ext/src page -in=index.html -out=build/index.html
I used 'sencha generate app' to create the original directory structure etc.
I have exactly the same issue.
Maybe as a hint, I've got another project where I generated the whole application, and the build. And here, with the build-impl.xml, I've got everything I need in all-classes : my controllers, models, etc
Not sure why but it seems if I explicitly do a 'requires' on my controllers in my app.js file then the compile works
Ext.Loader.setConfig({ enabled: true });
Ext.require([
'AM.controller.myController1'
, 'AM.controller.myController2'
.
.