i try migrate a developement environment to production with SDK Sencha tool.
But the proccess of building exclude of the "app-all.js" all models and stores defined in my App folder.
Only loads views and controllers. Any ideas why does this happen ?
Regards !.
Edit form more info:
For example mi cocina.js works as an app.js:
Ext.Loader.setConfig({
enabled : true,
paths: {
Ext: 'vendor/ext/src',
My: 'app'
}
});
Ext.application({
name: 'Alnitak',
appFolder: 'app',
controllers: ['Env','Cocina'],
launch: function(){
...
}
});
An the cocina controller:
Ext.define('Alnitak.controller.Cocina', {
extend: 'Ext.app.Controller',
store: [
'PlatosArmados',
'Niveles',
'Submenues',
'AlumnosPlato'
],
model: [
'PlatoArmado',
'Nivel',
'Submenu',
'AlumnoPlato'
],
views: [
'grid.PlatoArmado',
'grid.AlumnoPlato'
],
init: function() { ...}
});
What i have modify ?
Assuming you mean Sencha Command and not SDK, you have to change a few things:
Specify all your js paths in .sencha/app/sencha.cfg (parent folder is enough)
Build a new template app (http://docs.sencha.com/cmd/) and follow the pattern, not the Sencha Architect pattern for the Loader you use above. Sencha Cmd has its own way of handling javascript loading. You would not need to specify the paths with Ext.Loader.setConfig()
If you want to use the Architect pattern though, here's the guide.
Related
So far I've been able to bundle up all our controllers/directives/services into 1 script and I also bundled all the vendor scripts into another script file. Now I'm having trouble figuring out what the right way to load the AngularJS template files are. We are currently using Grunt and just copying the exact folder structure over to the dist folder but clearly this won't work in Webpack. Here is an example of our project structure(from the John Papa style guide)
My project inside the dist folder is currently rendered as follows:
Anybody have any input?
AngularJS templates are html files, so you need to add some loader for handling them.
You have multiple options, bundle those html files into the js bundle, using html-loader, pros of this approach is that your app won't make ajax call for the template, cons, your js bundle size will become large.
This will allow you to "require" your html template inside your controllers.
copy those raw files using copy-webpack-plugin, this way it will work the same way it works with Grunt (providing templateUrl path to the file that was copied).
In-order to be specific regarding lazy-loaded files you can attach .lazy.html suffix.
Then, enable file-loader on the .lazy.html files & assign it to templateUrl, and the regular once use with template: require('template.html').
As of best practice, I would "require" critical templates so they will be in the js bundle, and lazy load (via templateUrl) non-critical ones.
This is an example of webpack.config.js file:
module.exports = {
module: {
rules: [
{
test: /\.lazy\.html$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
{
test: /\.html$/,
exclude: /\.lazy\.html$/
use: [
{
loader: 'html-loader',
options: {
minimize: true,
},
},
],
},
],
},
};
// critical.component.js
angular.
module('myApp').
component('greetUser', {
template: require('critical.html'),
controller: function GreetUserController() {
this.user = 'world';
}
});
// none-critical.component.js
angular.
module('myApp').
component('greetUser', {
templateUrl: require('non-critical.lazy.html'),
controller: function GreetUserController() {
this.user = 'world';
}
});
I am trying to compile all angulara templates into a single js file.
Something like what ember does with ember-cli.
So I successfully managed to minify and concat all the javascript files.
I have just 2 files now vendor.js and application.js and whole lot of template files which I want to cram into templates.js.
How do I go about it? If some one could give step by step explanation, please. Any links would be appreciated too.
Surprisingly there is no information about this anywhere.
I am using mimosa as build tool, it seemed to me the easiest.
Here is my mimosa config:
exports.config = {
modules: [
"copy",
"stylus",
"minify-css",
"minify-js",
"combine",
"htmlclean",
"html-templates"
],
watch: {
sourceDir: "app",
compiledDir: "public",
javascriptDir: "js",
exclude: [/[/\\](\.|~)[^/\\]+$/]
},
vendor: {
javascripts: "vendor/js"
},
stylus: {
sourceMap: false
},
combine: {
folders: [
{
folder:"vendor/js",
output:"vendor.js",
order: [
"angular.js"
]
},
{
folder:"js",
output:"main.js",
order: [
"application/main.js"
]
}
]
},
htmlclean: {
extensions:["html"]
},
htmlTemplates: {
extensions: ["tpl"]
},
template: {
outputFileName: "templates"
}
}
It does generate templates.js file without any errors. But when I link it, angular spits a bunch of errors.
Once compiled, how do I actually call those templates from ng-include and from the route provider?
I assume that it is the same as I would call a script template using the id which in my case is derived from template original file name, right?
Maybe I am missing some important steps.
The build tool is not important here although desirable. If some one could show how to do it manually without a build tool I would figure out the rest.
Thanks.
I'm using Gulp as my build tool, and in that, there's a plugin gulp-angular-templatecache which pre-compiles and registers all templates for your module in the angular $templateCache - no changes are required to any of the calling code to use these. EDIT: The Angular documentation for $templateCache explains how the templateCache works.
It might be worth reading through the documentation for gulp-angular-templatecache to see how that pre-populates the $templateCache to see if you can crib something that would work with your build process.
Here's my gulp task that does the job:
var templateCache = require('gulp-angular-templatecache');
gulp.task('buildjstemplates', function () {
return gulp.src(['public/javascripts/app/**/*.html'])
.pipe(templateCache({module: 'app'}))
.pipe(gulp.dest('public/javascripts/app/'));
});
I am trying to clean up and restructure my javascript in my app, but once I change it it stops working. I am using ext scheduler in my app so that might be the problem. Here is how I want to set up
/ext/scheduler-3.0.0(all core code for schedule components go here)
/ext-all.js
/myscheduler(custom code for schedule components go here)
--/global/
----/view/
------globalscheduling.js
/model/
And This is how I start my app
ExtLatest.Loader.setConfig({enabled: true});
ExtLatest.define("scheduler.Application", {
extend: "Ext.app.Application",
requires: ["myscheduler.global.view.globalschedulegrid"],
name: "scheduler",
appFolder: "",
launch: function () {
getData()
}
});
However extjs still trying to go to https://c.na17.visual.force.com/apex/myscheduler/global/view/globalschedulegrid.js to find my view file what I doing wrong here?
Ext.Loader.setPath('myscheduler.global.view.globalschedulegrid', 'path to my scheduler');
OR
Ext.Loader.setConfig({
paths: {
'myscheduler': 'myscheduler',
}
});
Link to 5.0 Doc (Not sure which version you are using but it's the same)
5.1 as noted in the title. I didn't have to set the path for globalschedulegrid. Just specifying the paths in setConfig like this
ExtLatest.Loader.setConfig({enabled: true,
paths: {
'scheduler': "{!URLFOR($Resource.ConnectWeb, 'scripts/libs/scheduler')}"
}
});
I would like to setup a proper testing environment for a Sencha Touch 2 app using jasmine.
I used the first three parts of this tutorial for my first steps:
https://content.pivotal.io/blog/sencha-touch-bdd-part-1
https://content.pivotal.io/blog/sencha-touch-bdd-part-2
https://content.pivotal.io/blog/sencha-touch-bdd-part-3-testing-views-and-mocking-stores
My actual problem is the following:
two config entries for two of my classes (one store and one view) need to call methods / read properties of my main app object respectively the Ext.Viewport object.
Concrete:
1.) one of my stores reads a value on the main namespace of my app (MyAppName.app.backendUrl)
Ext.define('MyAppName.store.MyStore', {
extend: 'Ext.data.Store',
config: {
model: 'MyAppName.model.MyModel',
proxy: {
type: 'ajax',
url: MyAppName.app.backendUrl + '/data.json',
reader: 'json'
},
autoLoad: true
}
});
2.) one of my views does call a method (Ext.Viewport.getOrientation()) on Ext.Viewport:
Ext.define('MyAppName.view.LoginView', {
extend: 'Ext.form.Panel',
alias: "widget.loginview",
config: {
title: 'Login',
items: [
{
xtype: 'image',
src: Ext.Viewport.getOrientation() == 'portrait' ? '../../../img/login.png' : '../../../img/login-small.png',
style: Ext.Viewport.getOrientation() == 'portrait' ? 'width:80px;height:80px;margin:auto' : 'width:40px;height:40px;margin:auto'
}
]
}
});
Unfortunately, this crashes, because both objects (MyAppName and Ext.Viewport) are not yet defined when these calls are made.
This is only the case for the testing setup (as the tutorial outlines, there is a specific app.js just for the testing). When I run the actual app in the browser (via the 'normal' app.js), this problem does not occur.
How could this be fixed (so: how can I make sure that my views/store files are run AFTER MyAppname.app and Ext.Viewport already exist)?
Thanks a lot.
I found that running Ext.application usually opens views that you typically don't want during a unit test - otherwise you're venturing into integration testing so I avoid use of the Sencha development loader. Instead I use Karma to load the unit tests and application class files. You configure these files inside the karma.conf.js file (example below).
I've adapted the examples from the excellent unit test tutorials from Pivotal Labs. Since Karma has a built in web server you don't need Rails, Rake or pow as their 1st tutorial describes. Using Karma means you can easily integrate your unit tests with Javascript tools like IntelliJ IDEA or WebStorm as well as CI systems and cloud testing like https://saucelabs.com/ . You can also configure it to watch your code files and auto rerun unit tests when you update them. You can also use karma-istanbul to perform code coverage analysis.
Using a trick I learned here, I run a setup.js file that is configured in my karma.conf.js file to load before the unit tests. It creates a fake application object so that controllers can assign themselves to an application instance and it intentionally does not have a launch() method. It also include the SpecHelper.js code from the Pivotal Labs example.
// Create (but don't launch) the app
Ext.application({name: 'MyAppName' });
For the view unit test question, you can create a fake Ext.Viewport object and add a spyOn().andReturn() to fake the Ext.Viewport.getOrientation() method required by the view during testing. This then means your unit tests can easily cover both orientation cases. You also add a renderTo: property during testing to inspect the rendered view:
describe("when portrait orientation", function() {
var view;
beforeEach(function () {
if (!Ext.Viewport) Ext.Viewport = {};
spyOn(Ext.Viewport, 'getOrientation').andReturn('portrait');
view = Ext.create('MyAppName.view.LoginView', {
renderTo: 'jasmine_content'
}
}
it("should render large image", function() {
expect(Ext.DomQuery.select('...')).toContain('img/login.png');
});
it("should render 80px style", function() {
expect(Ext.DomQuery.select('...')).toContain('80px');
});
});
View unit tests (explains how to use the renderTo property).
https://content.pivotal.io/blog/sencha-touch-bdd-part-3-testing-views-and-mocking-stores
My setup.js file show below, includes code from SpecHelper.js shown here.
You'll need this to use the renderTo property.
https://content.pivotal.io/blog/sencha-touch-bdd-part-1
Controller unit tests covers how to connect a controller to your fake application instance.
https://content.pivotal.io/blog/sencha-touch-bdd-part-5-controller-testing
setup.js
This code steals a Karma loading trick from here but unlike their example it avoids use of the development loader.
Ext.Loader.setConfig({
enabled: true, // Turn on Ext.Loader
disableCaching: false // Turn OFF cache BUSTING
});
// 'base' is set by Karma to be __dirname of karm.conf.js file
Ext.Loader.setPath({
'Ext': 'base/touch/src',
'MyAppName': 'base/app'
});
// Create (but don't launch) the app
Ext.application({name: 'MyAppName' });
Ext.require('Ext.data.Model');
afterEach(function () {
Ext.data.Model.cache = {}; // Clear any cached models
});
var domEl;
beforeEach(function () { // Reset the div with a new one.
domEl = document.createElement('div');
domEl.setAttribute('id', 'jasmine_content');
var oldEl = document.getElementById('jasmine_content');
if (oldEl) oldEl.parentNode.replaceChild(domEl, oldEl);
});
afterEach(function () { // Make the test runner look pretty
domEl.setAttribute('style', 'display:none;');
});
// Karma normally starts the tests right after all files specified in 'karma.config.js' have been loaded
// We only want the tests to start after Sencha Touch/ExtJS has bootstrapped the application.
// 1. We temporary override the '__karma__.loaded' function
// 2. When Ext is ready we call the '__karma__.loaded' function manually
var karmaLoadedFunction = window.__karma__.loaded;
window.__karma__.loaded = function () {};
Ext.onReady( function () {
console.info("Starting Tests ...");
window.__karma__.loaded = karmaLoadedFunction;
window.__karma__.loaded();
});
karma.conf.js:
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// Don't use Sencha Touch dynamic loading
files: [
'touch/sencha-touch-all-debug.js',
'spec/Setup.js', // Load stubbed app - does not call app.launch()
{ pattern: 'spec/**/*.js', watched: true, served: true, included: true },
{ pattern: 'app/**/*.js', watched: true, served: true, included: false},
// Some class are not loaded by sencha-touch-all-debug.js
// this tell Karma web server that it's ok to serve them.
{ pattern: 'touch/src/**/*.*', watched: false, served: true, included: false}
],
// // Use Sencha Touch static 'testing' app.js
// files: [
// './build/testing/PT/app.js',
// './spec/SetUp.js',
// './spec/**/*.js'
// ],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE/.LOG_ERROR/.LOG_WARN/.LOG_INFO/.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera (has to be installed with `npm install karma-opera-launcher`)
// - Safari (only Mac; has to be installed with `npm install
// karma-safari-launcher`)
// - PhantomJS
// - IE (only Windows; has to be installed with `npm install
// karma-ie-launcher`)
//browsers: [ 'PhantomJS' ],
browsers: ['Chrome'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
You need to spec/javascripts/support/jasmime.yml the files you need in the right order :
src_files:
- touch/sencha-touch-all-debug.js # Load Sencha library
- spec/app.js # Load our spec Ext.Application
- app/util/Urls.js #custom dependency
- app/**/*.js # Load source files
One way to get around the problem would be to define items from initComponent. That way it won't be called until instantiated, instead of at startup.
Ext.define('MyAppName.view.LoginView', {
extend: 'Ext.form.Panel',
alias: "widget.loginview",
config: {
title: 'Login'
},
initComponent: function() {
this.items = [
{
xtype: 'image',
src: Ext.Viewport.getOrientation() == 'portrait' ? '../../../img/login.png' : '../../../img/login-small.png',
style: Ext.Viewport.getOrientation() == 'portrait' ? 'width:80px;height:80px;margin:auto' : 'width:40px;height:40px;margin:auto'
}
];
this.callParent();
}
});
And the same thing for the store, but in the constructor
Ext.define('MyAppName.store.MyStore', {
extend: 'Ext.data.Store',
config: {
model: 'MyAppName.model.MyModel',
autoLoad: true
},
constructor: function(cfg) {
this.proxy = {
type: 'ajax',
url: MyAppName.app.backendUrl + '/data.json',
reader: 'json'
};
this.callParent(arguments)
}
});
I wanna implement the Name Space concept in my JavaScript code, I am using ExtJS, but I don't know where to start, anyone could help me? The site example is very short.
Here is a good sample How do I declare a namespace in JavaScript?
and here is too https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/JavaScript_Object_Management
Actually in ExtJS4 the App name is your name space. So for example if you define your app this way:
Ext.application({
name: 'MyApp',
appFolder: 'app',
autoCreateViewport: true,
controllers: [
'MyController'
],
launch: function() {
console.log('hello');
// This is fired as soon as the page is ready
}
});
then all of your components you define need to be namespaced with MyApp. So a controller becomes MyApp.controller.MyController and a view becomes MyApp.view.InboxGrid