I working on a ExtJS project. This is how my folder structure looks like. I have no problem with all folders but 'util' folder is not recognized by extjs.
This is what I have in AjaxManager.js
Ext.define('FBT.util.AjaxManager', {
alternateClassName: 'AjaxManager',
singleton: true,
test: function() {
alert('test it!');
}
});
When I try to do
FBT.util.AjaxManager.test();
it does not work and this is what I got in the console.
Uncaught TypeError: Cannot read property 'AjaxManager' of undefined
As I said, I have no problems with classes that are placed in the view or controller folder. Any idea what's going on?
Thanks,
Angelo
Related
I started compiling my Ember.js templates server-side using the "ember-template-compiler.js" file mentioned here.
After compiling my templates and transpiling the output with Babel, I get a file which contains all of my templates assigned to an object called "export". Here are the first few lines:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Ember.HTMLBars.template((function () {
return {
meta: {
...
Now I've integrated jQuery, "ember.prod.js" and that file within the front-end. I thought it would work, but the only thing I get from the console, is:
ReferenceError: Can't find variable: exports
Why is "exports" not defined?
P.S.: Usually, I would use "ember-cli" for all of this. But in my current project, I need to do everything by myself (please don't ask, why).
But it should work, am I right? I mean, I did it exactly like it was stated here.
Fixed the problem by writing my own template compiler for Gulp istead of trying to use the one in Ember CLI: https://github.com/leo/gulp-ember-compiler
My application is working fine in ext js 4.2.1 but when I upgrade I am unable to get the viewport to load correctly. The view port is in a different file and loads initially but then I get the
Error: [Ext.create] Unrecognized class name / alias: App.view.MainViewport
I have tried requiring the the viewport file but that is not working. Any help would be much appreciated.
app.js
Ext.Loader.setConfig({enabled: true)};
Ext.Loader.setPath('Ext.ux', 'extjs5.1.1/ux');
Ext.require(['Ext.tip.QuickTipManager','Ext.container.Viewport', 'Ext.plugin.Viewport','Ext.layout.*','Ext.form.Panel','Ext.form.Panel', 'Ext.form.Label','Ext.grid.*','Ext.data.*','Ext.tree.*','Ext.selection.*', 'Ext.tab.Panel','Ext.ux.TabCloseMenu'] );
Ext.onReady( function() {
Ext.application({
name : 'App',
appFolder: 'extapp',
launch: function() {
Ext.create('App.view.MainViewport');
}
});
});
MainViewport.js
Ext.define('App.view.MainViewport', {
extend : 'Ext.container.Viewport',
alias : 'widget.MainViewport',
layout: {
type: 'border'
},
initComponent: function() {
console.info("initializing view");
}
});
I did try using the MainViewport in the require but that returned an error and empty page. I actually found the problem and was able to fix it!
The problem was that in the MainViewport file, I had a requires and then the required files also required other files. In order to find the files that were causing the errors, I had to traverse through all of the required files and find the failing one. I did this by commenting out each required file everywhere and eventually found the culprit. Then, my page rendered correctly. Thanks for your help!
I am trying to set up unit testing for a SPA using karma/jasmine
First of all, the following test runs just fine in karma:
/// <reference path="../../definitions/jasmine/jasmine.d.ts" />
/// <reference path="../../src/app/domain/core/Collections.ts"/>
define(["app/domain/core/Collections"], (collections) => {
describe('LinkedList', () => {
it('should be able to store strings for lookup', () => {
var list = new collections.Collections.LinkedList<string>();
list.add("item1");
expect(list.first()).toBe("item1");
});
});
});
However, collections is of type anyso that I can not use it for type declarations, thus I'm missing intellisense and whatnot when I am writing my tests. No good!
The problem arises when I try to re-write the test to a more TypeScript friendly format:
/// <reference path="../../definitions/jasmine/jasmine.d.ts" />
/// <reference path="../../src/app/domain/core/Collections.ts"/>
import c = require("./../../src/app/domain/core/Collections");
describe('LinkedList', () => {
it('should be able to store strings for lookup', () => {
var list: c.Collections.LinkedList<string> = new c.Collections.LinkedList<string>();
list.add("item1");
expect(list.first()).toBe("item1");
});
});
This compiles just fine, I get my type information for handy intellisense etc, but now karma throws an error.
It turns out it is trying to load the module without the .js postfix, indicated by the following error messages:
There is no timestamp for /base/src/app/domain/core/Collections!
Failed to load resource: the server responded with a status of 404 (Not Found)
(http://localhost:9876/base/src/app/domain/core/Collections)
Uncaught Error: Script error for: /base/src/app/domain/core/Collections
I'm gonna stop here for now, but if it will help I am glad to supply my karma config file, test-main and so on. But my hope is that someone has encountered this exact problem before and might be able to point me in the right direction.
My typescript is compiled with the AMD flag.
It is not a TypeScript problem. We encountered the same problem. Turns out that karma "window.__karma__.files" array includes all files included in the test, including the .js extenstion.
Now requireJS does not work when supplying the .js extension. To fix it, in our main-test.js file, we created a variable "tests" by filtering all the *Spec.js files and then we removed the .js from the file name as requireJS needs it to be. More information here: http://karma-runner.github.io/0.8/plus/RequireJS.html
Below is how we did it (based on the info supplied in the link above):
main-test.js
console.log('===========================================')
console.log('=================TEST FILES================')
var tests = Object.keys(window.__karma__.files).filter(function (file) {
return /\Spec\.js$/.test(file);
}).map(function (file) {
console.log(file);
return file.replace(/^\/base\/|\.js$/g, '');
});
console.log('===========================================')
console.log('===========================================')
require.config({
baseUrl:'/base',
paths: {
jquery :["http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min", "lib/jquery"],
angular : ["https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min", "lib/angular"],
angularMocks: 'app/vendors/bower_components/angular-mocks/angular-mocks',
},
shim: {
'angularMocks': {
deps: ['angular'],
exports: 'angular.mock'
}
},
deps: tests,
callback: window.__karma__.start
});
Also make sure you have supplied the files to be tested in your karma.config.js file, more details here: http://karma-runner.github.io/0.8/plus/RequireJS.html same as the link above.
Hope it helps
It turns out it is trying to load the module without the .js postfix,
That is the perhaps not the actual source of the error. Actually it is looking at /base/src/app/domain/core/Collections and not app/domain/core/Collections (as in your manual type unsafe way). Notice base/src/ that shouldn't be there.
Can anyone give me any pointers/examples on how to use your own custom helpers with grunt-static-handlebars? I've read the documentation and can't see how to do this.
I created helpers to use when using handlebars client side and I'd love to be able to replicate that on the serverside when building pages but currently can't work out how to do that.
I tried to create the fullName helper from the handlebars docs. I set my helpersPath to /helpers and created a fullName.js with this code
Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;
});
Then I added it to the base.json config file
{
...
"helpers": [
"fullName"
],
...
}
And then attempt to use it in a partial {{fullName person}}
But when I attempt to run the grunt task I getting an error. Fatal error: Object #<Object> has no method 'call'
Any ideas where I'm going wrong?
You can try out grunt-handlebars-to-static, which have a example project available solving your exact problem. Also the task is highly flexible for all different kinds of folder arrangement. The docs gives two examples of most typical folder arrangement as starters.
Disclaimer: I am the author :) Cheers.
I recently tried to use the gulp Gist posted here:
Everything builds fine, but in the browser I get an error in the generated templates.js file:
global.Handlebars = require("handlebars");
module.exports = Ember.TEMPLATES["index"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
The error claiming, basically, that 'module' is undefined...
I'm getting a strong feeling that I'm missing something extremely trivial here.
Thanks in advance
Because this causes the file to be wrap in some shim javascript:
'templates': {
path: 'public/js/templates.js',
exports: 'Ember.TEMPLATES'
},
Remove it and you'll be fine.
And requiring Ember in the prebundle is useless if you are also requiring it from your code.