I'm using aloha editor on my project but when I try to use a plugin I have always the same problem:
Aloha-Editor Error: The following module failed to load: css!format/css/format.css
Aloha-Editor Error: The following module failed to load: css!image/css/image.css
Aloha-Editor Error: The following module failed to load: css!image/vendor/ui/ui-lightness/jquery-ui-1.8.10.cropnresize.css
I think I'm missing something but I couldn't find which is the real error, here is part of my code.
<head>
<link rel="stylesheet" href="{{ MEDIA_URL }}aloha_editor/aloha/css/aloha.css" id="aloha-style-include" type="text/css">
<script type="text/javascript" src="/media/jquery.js"></script>
<script type="text/javascript" src="/media/script.js"></script>
<script src="/media/aloha_editor/aloha/lib/aloha.js" data-aloha-plugins="common/format,extra/draganddropfiles,common/image,common/link"></script>
</head>
<body>
<script type="text/javascript">
(function(window,document) {
var
$ = window.jQuery,
GENTICS = window.GENTICS,
$body = $('body');
Aloha.settings = {
logLevels: {'error': true, 'warn': true, 'info': true, 'debug': true},
errorhandling : false,
ribbon: false,
"i18n": {
// let the system detect the users language
"acceptLanguage": '<?=$_SERVER['HTTP_ACCEPT_LANGUAGE']?>'
//"acceptLanguage": 'fr,de-de,de;q=0.8,it;q=0.6,en-us;q=0.7,en;q=0.2'
},
"plugins": {
"format": {
// all elements with no specific configuration get this configuration
config : [ 'b', 'i','sub','sup'],
editables : {
// no formatting allowed for title
'#title' : [ ],
// content is a DIV and has class .article so it gets both buttons
'#content' : [ 'b', 'i', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat']
}
},
"dragndropfiles": {
config : { 'drop' : {'max_file_size': '200000',
'upload': {//'uploader_class':GENTICS.Aloha.Uploader, //this is the default
'config': {
'url': '/media/images_dragged/',
'extra_headers':{'Accept':'application/json'},
'additional_params': {"location":""},
'www_encoded': false }}}}
},
"table": {
config: ['table']
},
"image": {
config : { 'img': { 'max_width': '50px',
'max_height': '50px' }},
editables : {
'#title' : {},
}
}
}
};
$body.bind('alohaReady',function(){
$('#content').aloha();
});
})(window, document);
</script>
...
...
</body>
You've some issues in your code... eg. to use .aloha() use Aloha.jQuery not your own jQuery version (it's fine to use your jQuery for other stuff), settings need to be initialized before loading Aloha Editor, there's a new/better way to check for Aloha.ready ...
See here for a working example of your code: https://gist.github.com/1993723
All the best,
Rene
BTW:
you can also use the Aloha Editor forum here: http://getsatisfaction.com/aloha_editor
Related
I'm trying to add the wowhead tooltips to a docusaurus page.
The wowhead documentation suggests you need to add the following to your <head> section:
<script>const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script>
<script src="https://wow.zamimg.com/widgets/power.js"></script>
I can add the https://wow.zamimg.com/widgets/power.js fine using the scripts configuration option which works fine with defer or async:
module.exports = {
// Snipped rest of configuration
scripts: [
{
src:
'https://wow.zamimg.com/widgets/power.js',
defer: true,
},
],
For the inline portion <script>const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};</script> I have tried using a <Head> component in my index.js <Layout> section and had no success.
How can I add this inline script properly to docusaurus so it loads before the wowhead script?
Using the advice from D.Kastier, I successfully solved my problem, granted it wasn't very elegant.
To load the script properly, and have it update after the page initially loads:
injectHtmlTags() {
return {
headTags: [
// https://www.wowhead.com/tooltips
{
tagName: 'script',
innerHTML: `
const whTooltips = {colorLinks: true, iconizeLinks: true, renameLinks: true};
document.addEventListener('readystatechange', event => {
if (event.target.readyState === "complete") {
console.log('Updating tooltips from plugin');
window.$WowheadPower.refreshLinks();
}
});
`,
},
{
tagName: 'script',
attributes: {
defer: true,
src: 'https://wow.zamimg.com/widgets/power.js',
},
},
],
};
},
Then to update the tooltips each time the page changes:
onRouteUpdate({location}) {
setTimeout(function() {
window.$WowheadPower.refreshLinks();
}, 0);
},
I have a use case to migrate a large angularjs application and I want to start by doing this process in a small application first. So for that reason, I've took the tour of heroes angularjs webapp and I started to add angular to it ( by creating a new project with the angular-cli ) and then adding the NgUpgrade module.
The problem that I have now is that the angularjs webapp runs pretty well inside the angular 8 application but the components that belong to angular 8 they are not rendered.
I have the impression that my angular components are not bootstrapped since I've bootsraped manually angularjs but I'm not sure ... when I add explicitly the bootstrap property inside the #NgModules it works only for the angular components but not for angularjs (it makes sense ). So I was thinking maybe I have to upgrade the angularjs components or downgrade the newest angular components but I don't think so.
Here you will find the git repository with the code. Below more information related to my project:
angular version: 8.2.8
angularJS version: 1.6.10
angular-cli: 8.3.6
Project structure
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Common</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<hero-list></hero-list>
</body>
</html>
index.ts ( angularjs root module)
// initialize root module and make it exportable to be able to bootstrap it
// inside angular
export const heroAppModule = angular.module('heroApp', [
'ngMaterial',
'perfect_scrollbar',
'ngJsTree',
'ngTagsInput',
'ui.router',
'heroApp.underscore'
]).config(['$stateProvider', function ($stateProvider) {
var heroState = {
name: 'hero',
url: '/hero',
template: '<hero-list></hero-list>'
};
$stateProvider.state(heroState);
}]);
/** start: REQUIRE ZONE for angularjs
* Add angularjs files since they aren't yet fully ES6 modules
* we use requirejs as module loader
*/
require('./editable-field/editable-field');
require('./hero-detail/hero-detail');
require('./hero-list/hero-list');
require('./underscore/underscore.module');
require('./underscore/underscore.service');
/**
* end: REQUIRE ZONE for angularjs
*/
app.module.ts ( bootstraping angularjs with NgUpgrade )
import * as angular from 'angular';
import { UpgradeModule, setAngularJSGlobal } from '#angular/upgrade/static';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { heroAppModule } from './../ngjs/index';
import { HelloworldComponent } from './helloworld/helloworld.component';
#NgModule({
declarations: [ HelloworldComponent ],
imports: [
BrowserModule,
UpgradeModule
] // ,
// bootstrap: [HelloworldComponent]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
setAngularJSGlobal(angular);
this.upgrade.bootstrap(document.body, [heroAppModule.name], { strictDi: true });
}
}
main.ts
import 'zone.js/dist/zone'; // Included with Angular CLI.
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/ngx/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
hero list component (angularjs)
declare var angular: angular.IAngularStatic;
(function () {
'use strict';
angular.module('heroApp').component('heroList', {
template: require('html-loader!./hero-list.html'),
controller: HeroListController,
controllerAs: 'vm'
});
HeroListController.$inject = ['$scope', '$element', '$attrs'];
function HeroListController($scope, $element, $attrs) {
var vm = this;
vm.list = [
{
name: 'Superman',
location: 'The sky'
},
{
name: 'Batman',
location: 'Baticueva'
}
];
vm.updateHero = function (hero, prop, value) {
hero[prop] = value;
};
vm.deleteHero = function (hero) {
var idx = vm.list.indexOf(hero);
if (idx >= 0) {
vm.list.splice(idx, 1);
}
};
}
})();
app-root component ( file name: helloworld.component)
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './helloworld.component.html',
styleUrls: ['./helloworld.component.scss']
})
export class HelloworldComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
app-root template
<p>helloworld works!</p>
angular.json ( angular-cli file )
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"common": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/common",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets" ],
"styles": [
"bower_components/jstree/dist/themes/default/style.min.css",
"bower_components/ng-tags-input/ng-tags-input.bootstrap.min.css",
"bower_components/utatti-perfect-scrollbar/css/perfect-scrollbar.css",
"bower_components/angular-material/angular-material.css",
"src/styles.scss"
],
"scripts": [
"bower_components/jquery/dist/jquery.js",
"bower_components/angular/angular.js",
"bower_components/angular-material/angular-material.js",
"bower_components/angular-animate/angular-animate.js",
"bower_components/angular-aria/angular-aria.js",
"bower_components/jstree/dist/jstree.js",
"bower_components/ng-js-tree/dist/ngJsTree.js",
"bower_components/ng-tags-input/ng-tags-input.js",
"bower_components/utatti-perfect-scrollbar/dist/perfect-scrollbar.js",
"bower_components/angular-perfect-scrollbar/src/angular-perfect-scrollbar.js",
"node_modules/#uirouter/angularjs/release/angular-ui-router.min.js",
"node_modules/underscore/underscore.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "common:build"
},
"configurations": {
"production": {
"browserTarget": "common:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "common:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "common:serve"
},
"configurations": {
"production": {
"devServerTarget": "common:serve:production"
}
}
}
}
}},
"defaultProject": "common"
}
Result...
Finally I've figured out that the solution that I need will never use both components of each framework side by side at the root of my application. Instead, I've used the following pattern as the angular documentation says:
Once you're running a hybrid app, you can start the gradual process of upgrading code. One of the more common patterns for doing that is to use an Angular component in an AngularJS context. This could be a completely new component or one that was previously AngularJS but has been rewritten for Angular.
So as my old application is written in angularjs this framework will contain always my root application and also will be the wrapper of all my future features. So If someday I decide to write a new component in Angular 8 this component will live inside angularjs and it will be downgraded to be able to make it work.
Isolate your Angular 1 code and Angular 8 code
<body>
<app-root></app-root>
<div ng-controller="MyController">
<hero-list></hero-list>
</div>
</body>
I had a similar issue, even though in my index.html I had this:
<body>
<app-root></app-root>
</body>
I found that with the setup of the Angular docs for ngUpgrade, the top-level component needs to be the one from Angular.js, not the one from Angular:
<body>
<hero-list></hero-list>
</body>
I am trying to build an angular 2 application using typescript in visual studio 2015 application. I am using angular release candidate 1.
I am getting the following error message in the console of my browser while running the application.
index.html:24 Error: Error: XHR error (404 Not Found) loading http://localhost:3622/app.js(…)
I cannot understand why it is trying to look for app.js file. I have set index.html as the start page.
As seen in the code below , I am trying to display data in the datatable. Is there any issue with how I have setup the systemjs.js file or with the system.import statement in index.html file
Please find my folder structure
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
</head>
<body>
<my-app>Loading..</my-app>
</body>
</html>
Systemjs.config.js
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'#angular': 'node_modules/#angular',
'primeng': 'node_modules/primeng'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'.': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'#angular/testing',
'#angular/upgrade',
'#angular/router-deprecated'
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
main.ts
import { bootstrap } from '#angular/platform-browser-dynamic';
// Our main component
import { AppComponent } from './app/app.component';
bootstrap(AppComponent, []).catch(err => console.error(err));
app.component.ts
import { Component } from '#angular/core';
import { RiskListComponent } from './components/risks/risk-list.component';
import { DataTable, Column } from 'primeng/primeng';
#Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h1>{{pageTitle}}</h1>
<rm-risks> </rm-risks>
</div>
` ,
directives: [RiskListComponent, DataTable, Column]
})
export class AppComponent {
pageTitle: string = 'Test UK Trader';
}
risk-list.component.ts
import { Component } from '#angular/core'
import { DataTable, Column } from 'primeng/primeng';
#Component({
selector: 'rm-risks',
directives: [DataTable, Column],
templateUrl: '/app/risks/risk-list.component.html'
})
export class RiskListComponent {
pageTitle: string = 'Risk List';
risks: any[] = [
{
"riskId": 1,
"reference": "HISC9308336",
"insuredName": "SA 84161",
"inceptionDate": "March 19, 2016",
"riskType": "Quote",
"status": "Indication",
"grossPremium": "100",
"allocatedTo": "Broker User",
"allocatedCompany": "Broker"
},
{
"riskId": 2,
"reference": "HISC9308340",
"insuredName": "Upper Loi",
"inceptionDate": "April 25, 2016",
"riskType": "Quote",
"status": "Indication",
"grossPremium": "312.22",
"allocatedTo": "Andy Marples",
"allocatedCompany": "Broker"
}
];
}
risk-list.component.html
<h3 class="first">{{pageTitle}}</h3>
<p-dataTable [value]="risks" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">
<p-column field="reference" header="Reference"></p-column>
<p-column field="insuredName" header="Insured Name"></p-column>
<p-column field="inceptionDate" header="Inception Date"></p-column>
<p-column field="riskType" header="Risk Type"></p-column>
<p-column field="status" header="Status"></p-column>
<p-column field="grossPremium" header="Gross Premium"></p-column>
<p-column field="allocatedTo" header="Allocated To"></p-column>
<p-column field="allocatedCompany" header="Allocated Company"></p-column>
</p-dataTable>
tsconfig.js
{
"compileOnSave": false,
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../dist/",
"rootDir": ".",
"sourceMap": true,
"target": "es6",
"inlineSources": true
},
"exclude": [
"node_modules",
"typings",
"typings/main",
"typings/main.d.ts"
]
}
I would move the main.ts file under the app folder and import it this way:
<script>
System.import('app/main').catch(function (err) { console.error(err); });
</script>
You also need to have this configuration for SystemJS:
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
I'm trying to use Intern to create functional tests for a React (0.12.2) webpage. I ran into an issue while trying to test functionality which is triggered by the dblclick event. The event fires normally when I am manually testing the webpage but it does not fire in my Intern tests.
Also, not sure if this information matters, but in the environment I am testing in (Dartium), brokenMouseEvents is true and brokenDoubleClick is false. I am using Selenium for my WebDriver server (v2.43.1, with Core v2.43.1. Built from revision 5163bce).
I am testing on SauceLabs. Here is my error log: https://github.com/danielbank/testDoubleClick/blob/master/saucelabs_results.log
GitHub Repo:
https://github.com/danielbank/testDoubleClick
React Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Doubleclick</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script>
var HelloWorld = React.createClass({
render : function() {
return React.DOM.div({},[
React.DOM.button({'id': 'foo', 'onDoubleClick': function() {
React.renderComponent(React.DOM.p({'id': 'double-click-fired'},['Double Click Fired']), document.body);
}}, ['Double Click Me']),
React.DOM.button({'id': 'bar', 'onClick': function() {
React.renderComponent(React.DOM.p({'id': 'click-fired'},['Click Fired']), document.body);
}}, ['Click Me'])
]);
}
});
React.renderComponent(
HelloWorld({}),
document.body
);
</script>
</html>
Intern Tests:
define([
'intern!object',
'intern/chai!assert',
'require'
], function (registerSuite, assert) {
registerSuite({
name: 'test doubleclick functionality',
'test singleclick': function () {
return this.remote.get('http://localhost:8010/web/test_doubleclick.html')
.findById('bar')
.sleep(2000)
.click()
.end()
.sleep(2000)
.findById('click-fired')
.getVisibleText()
.then(function(text) {
assert.equal(text, 'Click Fired');
});
},
'test doubleclick': function () {
return this.remote.get('http://localhost:8010/web/test_doubleclick.html')
.findById('foo')
.sleep(2000)
.doubleClick()
.end()
.sleep(2000)
.findById('double-click-fired')
.getVisibleText()
.then(function(text) {
assert.equal(text, 'Double Click Fired');
});
}
});
});
Intern Configuration:
define({
proxyPort: 9000,
proxyUrl: 'http://localhost:9000/',
capabilities: {
'selenium-version': '2.44.0'
},
environments: [
{ browserName: 'internet explorer', version: '11', platform: 'Windows 8.1' },
{ browserName: 'internet explorer', version: '10', platform: 'Windows 8' },
{ browserName: 'internet explorer', version: '9', platform: 'Windows 7' },
{ browserName: 'firefox', version: '28', platform: [ 'OS X 10.9', 'Windows 7', 'Linux' ] },
{ browserName: 'chrome', version: '34', platform: [ 'OS X 10.9', 'Windows 7', 'Linux' ] },
{ browserName: 'safari', version: '6', platform: 'OS X 10.8' },
{ browserName: 'safari', version: '7', platform: 'OS X 10.9' }
],
maxConcurrency: 3,
tunnel: 'SauceLabsTunnel',
tunnelOptions: {
username: '<username>',
accessKey: '<accessKey>'
},
useLoader: {
'host-node': 'dojo/dojo',
'host-browser': 'node_modules/dojo/dojo.js'
},
reporters: ['pretty'],
functionalSuites: [ 'tests/functional/index' ],
excludeInstrumentation: /^(?:tests|node_modules)\//
});
Thanks for any help.
I was able to reproduce this issue. I'm not sure if the problem is specific to just React components, but the solution is to precede the doubleClick() with a click():
'test singleclick': function () {
return this.remote.get('http://localhost:8010/web/test_doubleclick.html')
.findById('bar')
.sleep(2000)
.click()
.doubleClick()
.end()
.sleep(2000)
.findById('click-fired')
.getVisibleText()
.then(function(text) {
assert.equal(text, 'Click Fired');
});
}
The intern.js documentation for doubleClick indicates that it:
Double-clicks the primary mouse button.
This does not seem to be the case. There seems to either be a bug in intern or a bug in the documentation.
I'm trying to use the sencha sdk to generate my minified file.
I have my page set up on
http://www.mysite.localhost/ext/jobs/index.html
reading from just index.html is not easily possible. When i enter
sencha create jsb -a http://www.mysite.localhost/ext/jobs/index.html -p app.jsb3
I get the following jsb file.
{
"projectName": "Project Name",
"licenseText": "Copyright(c) 2011 Company Name",
"builds": [
{
"name": "All Classes",
"target": "all-classes.js",
"options": {
"debug": true
},
"files": []
},
{
"name": "Application - Production",
"target": "app-all.js",
"compress": true,
"files": [
{
"path": "",
"name": "all-classes.js"
},
{
"path": "",
"name": "app.js"
}
]
}
],
"resources": []
}
ie it's not included all my classes. If i update
"path": "app/",
"name": "app.js"
app-all.js is created correctly. But how can i get the controllers and views. There are a lot of files. Does any one have any example mvc application jsb. My app is base on pandora.
app/app.js
Ext.Loader.setConfig({ enabled: true });
Ext.application({
name: 'Pandora',
models: ['Part', 'Material', 'Job', 'Process', 'Invoice', 'InvoiceDetail', 'PurchaseOrder'],
stores: ['SalesContact', 'Parts', 'Materials', 'Jobs', 'AccountHandlers', 'JobTypes', 'Processs', 'Artwork', 'Varnish', 'VarnishType', 'PrintType', 'ProofRequired', 'InvoiceDetails', 'PurchaseOrders'],
controllers: ['Part', 'Material', 'Job', 'Process', 'Invoice'],
launch: function () {
Ext.QuickTips.init();
var cmp1 = Ext.create('App.view.Jobs', {
renderTo: "form-job"
});
cmp1.show();
}
});
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<div id="form-job"></div>
</body>
</html>
Update
We got this working without the need for including everything in Ext.Loader() in app.js. Make sure you pass Ext.Loader() an array with your Viewport class. Still make sure you do the correct uses: and requires:. That way you final output for the jsb3 file contains everything.
I managed to sort this out on my end. I needed to use the Ext.Loader() in my app.js file. The general idea is you need to tell the loader where your source files are. Making sure your class file's are included in the build. Based on your code above for app/app.js.
Ext.Loader.setConfig({ enabled: true });
// SDK builder required source files, use the class names.
Ext.Loader.require(['Pandora.view.Viewport']);
Ext.application({
name: 'Pandora',
models: ['Part', 'Material', 'Job', 'Process', 'Invoice', 'InvoiceDetail', 'PurchaseOrder'],
stores: ['SalesContact', 'Parts', 'Materials', 'Jobs', 'AccountHandlers', 'JobTypes', 'Processs', 'Artwork', 'Varnish', 'VarnishType', 'PrintType', 'ProofRequired', 'InvoiceDetails', 'PurchaseOrders'],
controllers: ['Part', 'Material', 'Job', 'Process', 'Invoice'],
launch: function () {
Ext.QuickTips.init();
var cmp1 = Ext.create('App.view.Jobs', {
renderTo: "form-job"
});
cmp1.show();
}
});
I found that in your view and controller classes make sure if you have stores tied to your view (like a combobox) that you are adding items to the view itself in the initComponent and you use the requires: 'MyApp.store.Users' for the class. Or you will receive strange errors as the view will initialize before the store.
The Ext.Loader.require() must be placed before the Ext.Application. Once you have it all setup with the models and controllers, you'll want to add your views too.
You should be in a good place to create your jsb3 file now, and see that your models, views, and controllers are now part of the process for the build.