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'
.
.
Related
I'm using generator-ionic from link, and It made well, but I want to know how to add angular controllers or directives files.
It's not like app when I made with 'yo angular'
there is no views folder and files neither.
'yo angular:directive myDirective' not work.
do I have to make all files and folders by myself?
I found that the Angular Generator works fine with a project created by yo ionic. You are correct that the folder structure is different, but that may not a problem for you. You could always start with a completely blank ionic template, and then start adding the pieces you need. Your app.js and index.html files will be where the Angular Generator expects them to be.
I am new to Sencha Touch and Sencha Command. I downloaded the requisite tools to build a Sencha Touch app. When I use the following command in Sencha Command, the app is generated fine but when I try to access it using the browser I see only the loader.
sencha -sdk touch-2.3.1 generate app MyApp ./MyApp
When viewed on Firefox, it shows following errors in the console.
TypeError: Ext.Loader is undefined bootstrap.js: 7
TypeError: Ext.application is not a function app.js: 50
On some investigation, I found that it is looking for the above mentioned files in a directory named touch directly under http://localhost/. Whereas I have Sencha framework and my app under http://localhost/sencha/touch-2.3.1 and http://localhost/sencha/MyApp.
Some files under MyApp directory have the path mentioned to touch directory as ../../../../touch. If I copy the framework in http://localhost/touch it works fine.
Why should this happen? Shouldn't my app refer to http://localhost/sencha/touch-2.3.1 folder for dependencies?
I am using the default configuration to build a default application. Can someone guide me what I might be doing wrong?
Sencha Cmd assumes that your app runs at the root of the web server... so if you're running it from a subfolder, you might see problems like this.
You can set the correct paths manually to your resources in app.js
//at the very top, before Ext.appliction()
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext' : '../touch',
'My' : 'app' //or wherever
}
});
I think that should solve your problem, if I understand it correctly.
We have an extjs application where the structure we laid out doesn't exactly match the structure Sencha recommends. In our structure we don't have an app.js but we do have a js where we mention the autoload and launch function, example as below along with the folder structure.
What we are looking is to minify all the JS files in admin folder and create one JS to be used in production, we tried looking at the Sencha CMD but of no luck. Can some one please point us for the exact steps for minifying our application for production use.
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Ext.ux': '../../script/js/ext4/ux'
}
});
Ext.require('Admin.view.Administration');
Ext.application({
name: 'Admin',
appFolder: '../../script/js/ace/admin',
launch: function()
{
Ext.QuickTips.init();
var me = this;
Ext.create('Admin.view.Administration', {
renderTo: 'contentPanel'
});
}
});
We tried Cmd by generating JSB3 file, I know its deprecated in 4.2.1 but with the structure we have we felt that was the only option.
we tried the below command, but no jsb3 file got generated
sencha build admin.jsb3 <path to the admin js folder>
Thanks in advance, any pointers are really appreciated.
I posted this in Sencha forum, but I am expecting a much simpler option then they have provided.
Edit
we have multiple apps, and in most cases we try to use the js from other app folders.
For example in the below image we have utilities and admin apps, from utilities app we use SourceStore and the autoloader is defined as below to access the required
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Utilities': '../../script/js/ace/utilities',
'Ext.ux': '../../script/js/ext4/ux'
}
});
If you let Sencha CMD to generate a skeleton application for you and then merge your existing code with it, then it will be really easy.
Otherwise you can try the old JSBuilder from Sencha as well.
I'd highly recommend checking out grunt with the grunt_sencha_dependencies plugin. Here's a tutorial.
At a high level, what you do is:
1) Run the sencha_dependencies plugin to generate a list of dependencies.
2) Pass the outputs to the uglify plugin to concat and minify the javascript.
3) Use grunt's copy task to replace to update your index.html with the minified output.
edit: I've dealt with Sencha CMD and it is awful. I would not wish it on my worst enemy. Grunt is just way easier.
I recommend you using JAWR. Basically you define in the jawr.properties file your bundles, and say which file or folder belongs to which bundle. A bundle is actually a bunch of JS files that are minified into another single one and can be requested separately in your servlets/JSP files. Besides, you can define dependencies between bundles (which by default are independent), so that when you include a bundle, other bundles are automatically included in your page. To include a bundle you use the special tag <jwr> in your servlet. Besides, you can enable the debug mode, so that when you develop, you can debug your code.
How it works: you add a servlet to your web.xml file to be loaded on start-up, which is also the stage when these bundles are generated (transparent to you).
Some tips:
Check this tutorial
Because in ExtJS the order in which the files are used is important, you should consider it when you define your bundles.
If you are willing to give Sencha CMD another shot, you could try using the sencha compile command.
sencha compile --classpath=folders-your-using,separated-by-commas concatenate --yui --output-file=output.js
--classpath is the folders you want to include.
--yui is the compressor
--output-file is the name of the javascript output.
I would recommend reading the sencha cmd guides. They can be a little intense, but sencha command packs so many tools in it that it probably deserves to be: http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html
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've done as described here: http://docs.angularjs.org/tutorial/step_00 but can't run the phonecat example as AngularJS. It runs like a bunch of html files. For example, the app/index-async.html page gives me following error in Chrome's console:
Uncaught Error: No module: myApp
This file contains
angular.bootstrap(document, ['myApp']);
The bootstrap part needs to be called after the element you're bootstrapping to is loaded. You can either put the bootstrap code at the end of your html, or you can use something like document ready from JQuery.
I had the same problem. When loading angular with reguirejs, you have to remove the ng-app directive from the html and add it after calling angular.bootstrap(document, ['myApp']) like this:
$(html).addClass('ng-app');
Check this seed project out: https://github.com/tnajdek/angular-requirejs-seed specifically index.html and app/js/main.js
Make sure your web server is running.
If you are running node.js:
1. Run node scripts\web-server.js to start the web server
2. In your browser, navigate to http://localhost:8000/app/index.html
If you are running some other http server: (I used WAMP for the AngularJS tutorial you listed):
1. Make sure the /angular-phonecat repository was cloned into your wamp/www folder.
2. Navigate in your browser to http://localhost:[port-number]/angular-phonecat/app.
TIPS:
To change directories using WINDOWS COMMAND LINE -
cd /d c:\wamp\www
To change directories using GIT BASH -
$ cd /c/wamp/www
Additional note: In Git Bash, to display the directory you're currently in, use $ pwd