Extensible.log is undefined - extjs

I am trying to get the Calendar Pro from Extensible to work.
if I do everything as the example says here, I get an undefined for the log function on Extensible.js :
However everything looks alright in my code :
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {
"Extensible": "js/lib/extensible-1.5.2/src",
"Extensible.example": "js/lib/extensible-1.5.2/examples"
}
});
Ext.require([
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Extensible.example.calendar.data.Events'
]);
Both the src and the examples paths are correct.
My Extinsible folder structure sits next to the extjs src like this :
It seems like I am missing something or Extensible is not yet being initialised properly.

Looks like you just forgot to include the Extensible.js by adding it to your requires statement:
Ext.require([
'Extensible.Extensible', //here
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Extensible.example.calendar.data.Events'
]);
This will include the main Extinsible.js file as well as the calendar and example files.

As mentioned on the support forums:
The Extensible.log error typically means that you are using the source
code from Github without compiling it first. Either run the build
script per the README file, or stick to the download zip containing
the pre-built files.
If you are using a properly-built version of the framework and still getting this error then you might provide more details about how you set things up.

Related

JsHint: .jshintrc not working

I am getting error regarding 'angular' was used before it declared.
I have tried to declare it in .jshintrc as per below
"globals": {
"angular": true
}
but still I am getting an error.
Also I am getting error of 'alert' is undefined even I have keept below setting in .jshintrc
"browser": true,
Could you please help me setting in .jshintrc is not working. What I am doing wrong.
I have also tried to add /global angular/ at top of file but after adding to the file I am getting error of
Unsupported rule: validateJSDoc:
Thanks in advance.
Try to use https://github.com/cfjedimaster/brackets-jshint/.
Or maybe the answer of this question Adobe Brackets disable jslint but allow jshint will solve your issue.
According to JSHint Documentation globals can be defined inline at the beginning of your JavaScript files like this:
/* globals Angular */
Or in a the .jshintrc JSON object like this:
{
....,
"predef": [ "angular" ]
}
prefed means predefiend. You should include all the globals you are using in this array.

JSHint in WebStorm doesn't know protractor command "browser"

I'm trying to make test for AngularJS web page in WebStorm (using Jasmine and Protractor frameworks), I'm using JHint for code inspection...
All code is OK except one command: "browser", example of code:
describe('Test',function(){
it('Open page',function(){
browser.get('https://www.angularjs.org');
browser.sleep(2000);
});
});
JSHint is still highlighting errors with browser:
Problem synopsis JSHint: 'browser' is not defined. (W117)
Unresolved function or method sleep() at line 20
In JHint Environment I have enabled:
Jasmine
Node.js
In JavaScript Libraries I have enabled:
Node.js Core
angular-protractor-DefinitelyTyped
jasmine-DefinitelyTyped
selenium-webdriver-DefinitelyTyped
Does anybody know what do I have to enable or which Library do I have to download to make JSHint understand the "browser" command please?
Do you have a .jshintrc file ?
{
"globals": {
"browser": false,
},
"jasmine": true
}
You can add browser as a global.
JSHint works on per-file basis and doesn't 'see' global variables defined in other files unless they are added to 'global' list. This can be done by either adding the corresponding comments (/* global browser*/) to your files - see http://www.jshint.com/docs/, or by adding variables/functions you'd like to use globally to the 'Predefined' list in WebStorm Preferences -> Languages & Frameworks -> Javascript -> Code Quality Tool -> JSHint -> Predefined (,separated).

Any easy way to add build version info to coverage test results

I am using karma-coverage to measure the unit test coverage in my project and everything works in that regard just fine. I use HTML reporter into default directory.
However, I would need to "stamp" the coverage report with the build version information that I do have available using grunt-git-describe, which is currently used in the AngularJS app footer that loads the resulting version.json file. I didn't find any direct way to use this version.json file in the html reports from karma-coverage. So if anybody has a good idea how to do it, I would appreciate a lot.
Thanks in advance!
I did manage to implement this with a sort-of work around. I use text-replace module in grunt after running karma to do this. If some one has a better solution, please share as this is a bit of a hack, but it works ok. As karma-coverage's html reports in my environment goes to the projects' root /coverage/ folder, I made a recursive text replace into every .html file there looking for the default footer and adding my version info there...
First, installed grunt-text-replace
$ npm install grunt-text-replace --save-dev
Then I made a following replace function in gruntfile.js:
grunt.initConfig({
replace: {
coverage: {
src: ['coverage/**/*.html'],
overwrite: true,
replacements: [
{
from: '<div class="meta">Generated by',
to: function(){return grunt.config.get('task.replace.versionString');}
}
]
}
},
// and your other stuff in initConfig()
And I added a new task into grunt for this:
grunt.registerTask('coverage', 'Adds version info to coverage results', function(){
grunt.task.requires('version'); // The 'version' task creates a 'version.json' file
var vers = grunt.file.readJSON('version.json');
// Set the desired string to be used in text-replace -function
grunt.config.set('task.replace.versionString', '<div class="meta">Version ' + vers.version + ', Tag "' + vers.revision[0] + '"<br>Generated by');
grunt.task.run(['replace']);
});
A bit ugly but works like a charm ;-)

Uglifying a RequireJS/Backbone project into one single .js file?

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'
})

How to use the 'overrides' folder generated by Sencha cmd for an Ext JS 4 project

I have generated a project using Sencha cmd. This creates a nice folder named 'overrides' where I have put my overridden Ext.Ajax class. I then include it in my app.js file like so
requires: [
'overrides.Ajax'
]
This works just fine when using my app, however when I try to build it using Sencha cmd I get the following error:
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.BasicException: The following error occurred while e
xecuting this line:
[ERR] Z:\public_html\LoginScreen\.sencha\app\build-impl.xml:469: com.sencha.exce
ptions.ExBuild: com.sencha.exceptions.ExBuild: Failed to find any files for Z:\p
ublic_html\LoginScreen\app\app.js::ClassRequire::overrides.Ajax
Does anyone know how to properly include files that are inside the overrides folder?
Turns out I needed to edit the .sencha/app/sencha.cfg file, adding the following to the end of the app.classpath
,${app.dir}/overrides
Thanks to Mitchell over at the official Sencha forums for helping me out!
http://www.sencha.com/forum/showthread.php?261361-Properly-using-the-overrides-folder-generated-by-Sencha-Cmd-for-Ext-Js-4.2
For Ext 5 user, you can specify "overrides folder" in app.json. Example:
"overrides": "${app.dir}/overrides",
You probably need path defined in your loader config for overrides.
Something like this:
Ext.Loader.setConfig({
paths: {
'Ext.ux': 'js/extjs/ux',
'overrides' : 'somepath/to/overrides',
'Skirtle.CTemplate':'js/extjs/ux/SkirtleCTemplate.js' //<-- specific component
}
});
For me just the
requires: [
'overrides.Ajax'
]
didn't work I had to add
requires: [
'MyApp.overrides.Ajax'
]
And it worked :)
Also the vars
// #require #packageOverrides
// #require #appOverrides
don't do anything for me, so the steps are
add the ,${app.dir}/overrides in the sencha.cfg
add the requires in the app.js inside the Ext.application
Tested in Sencha Cmd v4.0.2.67

Resources