I'm new to Ext and it's my first contact with this framework and I'm creating java web app. Here is my folder structure:
src
--main
--webapp
--index
--application
--controller
--Index.js
--model
--store
--view
--MainPanel.js
--Index.js
--resources
--WEB-INF
--Index.jsp
Here is webapp/Index/Index.js
Ext.application({
name: 'Spring_Ext',
appFolder: '/index/application',
controllers: [
'Index'
]
});
And here is webapp/index/application/controller/Index.js
Ext.define('Spring_Ext.controller.Index',{
extend: 'Ext.app.Controller',
views: ['MainPanel'],
init: function(){
....
}
....
});
When I run it on tomcat in chrome I get error saying it cannot found(404)
GET http://localhost:8081/index/application/controller/Index.js?_dc=1425849848988 ext-all-debug.js:6262
and when looking in source tab in chrome developer in index folder there isn't application folder with MVC structure, but only Index.js.
Thats because at the index.js level of your directory structure you are already in /index/application/
Extjs is now looking for the same path and cannot find it. Instead just specify '/' for you appFolder config. You might even not need to set this as it may default to this already
No need for appFolder. And in your source tab there is no application folder with mvc because your controller hasn't loaded successfully. Try giving the whole path of MainPanel in our controller like this
Views: Spring_Ext.view.MainPanel
Related
Question: How do I load a configuration file from a Plugin/config Directory?
Demo Project: https://github.com/CakePHPKitchen/CakeDC-Users-Permissions-Example
I am using CakeDC/users plugin and it has a permissions.php file that it loads the RBAC permissions from. From what I can tell, it either loads the default permissions file that is in the user plugin's config folder OR it loads the permissions.php file from the app/config folder.
Now for my app skeleton I have a bunch of permissions in the app/config/permissions.php, however, I do not want to modify that file as I will be doing git pulls from the upstream repo and I would like to avoid conflicts.
So what I would like to do is, in the app skeleton bootstrap
I would like to
foreach(Plugin::loaded() as $plugin) {
$path = Plugin::path($plugin) . 'config/permissions.php';
if(file_exists($path)) {
Configure::load($path, 'default', true);
}
}
But I am getting the following error....
Error: The application is trying to load a file from the /Users/jlroberts/Projects/JeffreyLRobertsCom/CakePHPKitchen/PluginDemos/plugins/SharpAgent/config/permissions plugin.
Make sure your plugin /Users/jlroberts/Projects/JeffreyLRobertsCom/CakePHPKitchen/PluginDemos/plugins/SharpAgent/config/permissions is in the /Users/jlroberts/Projects/JeffreyLRobertsCom/CakePHPKitchen/PluginDemos/plugins/ directory and was loaded.
Any ideas on how I can load the permissions.php file from the Plugin/config directory?
EDITED: You can load permissions.php file from the Plugin as it is doing now, but change the contents of permissions.php to preserve existing permissions defined in configuration, for example:
config/permissions.php
$permissions = [
// add your app permissions here
[
// ...
],
];
// there are more permissions in this config key, defined across your plugins
$morePermissions = \Cake\Core\Configure::read('MyPermissions');
$allPerms = array_merge($permissions, $morePermissions);
return ['CakeDC/Auth.permissions' => $allPerms];
Then inside each plugin you could have:
YOUR_PLUGIN/config/bootstrap.php
$permissions = \Cake\Core\Configure::read('MyPermissions');
$someMorePermissions = [
[
// permissions injected into the app from this plugin
]
];
$permissions = array_merge((array)$permissions, $someMorePermissions);
\Cake\Core\Configure::write('MyPermissions', $permissions);
Allowing each plugin to dynamically inject/manage permissions into the app.
I've created a c9.io environment with this code here https://ide.c9.io/steinkel/users-35-custom-permissions
I am trying to understand how requireJs works. There is a property "packages" which I came across while configuring requireJs. What my understanding is that 'packages' is used to mention a complete folder/module which contains "main.js" & main.js requires all other dependencies inside that module. But does mentioning "packages" in config file will automatically load main.js or do we need to do something to make it load main.js ?
Below is my folder structure & main.js snippet. 'main.js' is the data-main or entry point of application.
So after trying few stuff, what I understood is that packages lets you mention a directory or folder which has other modules (commonJs directory is what docs refer it to). So the way we define a package is :
packages: [
{name : 'controllers' , location :'../controllers' },
{name : 'directives' , location : '../directives'},
{name : 'services' , location : '../services'}
] ,
Where name is an alias for this entire directory or folder. location is the path of the folder relative to your main.js or requireJs's config file.
Now answering the 2) point - it does not load automatically. For it to load we need to require it somewhere. Once we require it, requireJs will first load the main.js inside that directory by default. And we need to define all the other modules inside that directory, in this main.js. For eg- I will require it in my app.js before bootstrapping my application-
require([
// Add additional dependencies
'angular',
'angular-ui-router',
'jquery',
'app',
'route',
"controllers",
"directives",
"services"] , function(){ console.log("All dependencies loaded"); });
I'm using AngularJS ngBoilerplate and trying to add my module. I placed file mymodule/mymodule.js with code
angular.module( 'mymodule', [] );
in common directory. I added path to file in build.config.js, then add it to app.js dependencies:
angular.module('app', [ ..., 'mymodule'
then run grunt build and got:
Iceweasel 24.7.0 (Linux 0.0.0) AppCtrl isCurrentUrl should pass a dummy test 1 FAILED
minErr/<#/var/www/angular/vendor/bower/angular/angular.js:68
loadModules/<#/var/www/angular/vendor/bower/angular/angular.js:4379
forEach#/var/www/angular/vendor/bower/angular/angular.js:336
loadModules#/var/www/angular/vendor/bower/angular/angular.js:4339
createInjector#/var/www/angular/vendor/bower/angular/angular.js:4265
workFn#/var/www/angular/vendor/bower/angular-mocks/angular-mocks.js:2409
script mymodule.js included in page correctly.
What am I doing wrong?
Are you sure you want to place the nodule in the common directory ? I'm not sure about what you're trying to achieve. However, to get up and running with a custom module in ngbp, I would suggest that you create a new folder under src/app called mymodule. Next create a mymodule.js under the newly created directory. Finally, add your code to the file:
angular.module( 'mymodule', [
....
]);
And add the module to the src/app/app.js
angular.module('app', [ ..., 'mymodule']);
The grunt build should be working at this stage.
I found answer! Adding path mask for my module to karma-unit.tpl.js solve the problem.
I worked along the following tutorial to try to optimize my project into one single .js file, but unfortunately I can't seem to get the expected results. I get r.js to create an optimized folder for me, but instead of a single file, I get uglified copies of each individual .js file in their respective folders. Seems like that last concatenation step is somehow missing.
I'm trying to leverage an existing config file instead of using paths, I don't know if that specific step is breaking it.
My build/app.build.js is:
({
appDir: '../',
baseUrl: 'js',
mainConfigFile: '../js/config.js',
dir: '../../my-app-build',
modules: [{
name: 'main'
}]
})
My main.js file has the config file as its dependency:
require(["config"], function() {
require(['underscore', [...]
[...]
}
}
And the config file is where all of my project dependencies are declared:
require.config({
baseUrl: "js",
paths: {[...]},
shim: {...]},
});
Does anyone have insight into why I might not be getting that single file output that I'm looking for? I tried the other approach in this post, but that only ever produces main.js for me with the config file prepended to it.
Thanks!
The issue was caused by the following option missing from the r.js build configuration file:
findNestedDependencies: true
Without it, r.js would not go past the first require in main.js, thus loading only config.js and none of the next level of dependencies. Just for reference (note that it saves the product of optimization in the same source folder, which is not ideal) looks like this:
({
baseUrl: '.',
mainConfigFile: 'config.js',
name: 'main',
out: 'main-build.js',
findNestedDependencies: true,
})
I had the same problem and got the solution from the Github Issue list. May be this configuration parameters will help you too
https://github.com/jrburke/r.js/issues/379
If you only want one JS file built, instead of using dir: use out: for a single JS file build.
Specify output filepath:
({
// ...
out: '../main.min.js'
})
I wrote a backbone.js app that uses require.js and is broken up with models/, collections/ and so forth. I then wrote another app that depends on the first app (and some other things. The files are laid out like so:
/scripts/appA/
models/
collections/
views/
/scripts/appNeedsA/
models/
collections/
views/
What do I put in the needsA to require appA? The below seems logical to me but doesn't work. If I use ../../appA, that finds appA but IT's dependencies can't be found because the root is wrong.
define(
['underscore', 'backbone', '../appA'],
function (_, Backbone, appA) {
...
}
It might not be the answer you were hoping for but, here's one approach:
https://github.com/busticated/RequireLoadingExample
The idea is that you define your module deps using the path the consuming application will use, then in the consumed app you alias the path appropriately.
In my example, I have a top-level main.js file which pulls in both app1.js and app2.js modules. Both of these modules depend on modules within their own sub-directories - e.g. app1.js uses one/mods/a.js and one/mods/b.js. I have another main (main-one.js) file that lives a level down inside the one/ directory. This file calls:
require.config({
paths: {
'jquery': 'libs/jquery',
'one': '.'
}
});
So now when app1.js loads, the one/mods/a.js path is translated to ./mods/a.js and is found / loaded without issue.
You should be able to fork my repo above and load index.html & one.html in a browser with js console open to see it all work.
Hope it helps!
The proper solution is to:
define(
['underscore', 'backbone', 'appA/views/whatever'],
function (_, Backbone, appAWhateverView) {
...
}
and to set your require.config paths to include:
require.config({
paths: {
appA: '../appA'
}
});