Extjs 5 class not found when lunch application - javascript

I am using Extjs 5.0.1, trying to implement basic app. This is my folder structure:
Project
app
controller
model
store
view
MainView.js
app.js
OtherFolder
index.html
Note: index.html file is in other location than app.js
This is my index.html file
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
<script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<script type="text/javascript" src="../Project/app.js"></script>
</head>
<body>
<div id="tables"></div>
</body>
</html>
this is my app.js file:
//app.js
Ext.define('GestioneTit.app.Application',
{
extend: 'Ext.app.Application',
name: 'GestioneTit',
launch: function(){
Ext.create('GestioneTit.view.MainView');
}
});
Ext.application('GestioneTit.app.Application');
This is my MainView.js file:
//MainView.js
Ext.define('GestioneTit.view.MainView',
{
extend: 'Ext.tab.Panel',
tabPosition: "left",
tabRotation: 0,
width: 900,
height: 1000,
activeTab: 0,
items: [
{
title: 'Tab 111111111111111111111111111111 22111221',
html: 'A simple tab'
}],
renderTo: "tables"
});
The problem is when I lunch my application I view this error in console:
[W] [Ext.Loader] Synchronously loading 'GestioneTit.view.MainView'; consider adding Ext.require('GestioneTit.view.MainView') above Ext.onReady
SCRIPT5022: [Ext.create] Unrecognized class name / alias: GestioneTit.view.MainView
I have follow the guides in the official Sencha website, but it seems not working.
I analyzed the http request and I noticed a 404 when the loader try to load the MainView.js file. It produce a wrong url.

In a typical ExtJS application, you place your source code in a folder called app directly under the folder you put the index.html file in. You haven't done that – as a result, the Ajax request to load the view class goes to the wrong place (as you've seen).
What you need to do is tell ExtJS where your code lives. And for that, Ext.Loader.setPath is your friend.
For example: Ext.Loader.setPath('GestioneTit', '../Project/app')
http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.Loader-method-setPath

Try adding the view to the views config in Application.js:
Ext.define('GestioneTit.app.Application',
{
extend: 'Ext.app.Application',
name: 'GestioneTit',
views: [
'GestioneTit.view.MainView'
],
launch: function(){
Ext.create('GestioneTit.view.MainView');
}
});
Ext.application('GestioneTit.app.Application');

Related

Dojo AMD not loading custom module

I'm trying to make a web application using the ArcGIS API, Dojo, and Flask. I want to start by making a "file uploads" dialog, which I am trying to define as its own module using the Dojo 1.7 AMD convention (i.e. "define").
Here is my file structure:
\static
home.js
fileUpload.js
\templates
home.html
main.py
Here is the code for the dialog (copied from one of the Dojo Tutorials). I am basically trying to put all dialog related function (i.e. show and hide) in one module:
define([
"dijit/registry",
"dijit/Dialog",
"dijit/form/Button",
"dojo/ready",
"dojo/domReady!"
], function (registry) {
console.log("HELLO WORLD");
return {
// Show the dialog
showDialog: function() {
registry.byId("uploads").show();
},
// Hide the dialog
hideDialog: function() {
registry.byId("uploads").hide();
}
}
});
At the end of "home.js" I try to create and instance of the dialog module:
var fu = new fileUpload();
Then in my "home.html" file, I define the actual dialog and try to use the "fu" object's variables as event handlers for closing and opening the dialog:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>morPOP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<link rel="stylesheet" href="../static/css/home.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script src="../static/js/home.js"></script>
</head>
<body>
<!-- Map -->
<div id="viewDiv"></div>
<!-- Upload Button -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<button type="button" id="uploadbtn" class="btn btn-primary" onclick="fu.showDialog()">Upload</button>
</div>
<!-- Upload Dialog -->
<div class ="dijitHidden">
<div id="uploads" data-dojo-type="dijit/Dialog" data-dojo-props="title:'Upload Files'">
<p>The following files must be uploaded to run a simulation. File names must match those listed below.</p>
<p>Acceptable file extensions: .txt or .csv</p>
<ul>
<li>Geographic data</li>
<ul>
<li>Age_Dissemination</li>
</ul>
<li> Probability Data </li>
<ul>
<li>ageContactDuration_hospital_nurse</li>
<li>ageContactDuration_hospitalPatient</li>
<li>ageContactNumber_hospital</li>
</ul>
<li> ??? </li>
<ul>
<li>Census_Division_Mapping</li>
</ul>
</ul>
<button onclick="fu.hideDialog();">Finish</button>
</div>
</div>
</body>
</html>
The error that I get in the google Chrome developer console is the following:
Uncaught TypeError: Cannot read property 'on' of undefined
at new g (init.js:56)
at home.js:51
at Q (init.js:18)
at init.js:18
at A (init.js:18)
at ea (init.js:18)
at d (init.js:20)
at HTMLScriptElement.<anonymous> (init.js:23)
I'm not sure what "on" property the error is referring to. Does anyone have any ideas? Why can't I declare an instance of my module?
** EDIT ***
I've changed my home.js file to "require" fileUpload.js, but I am now getting the following error when I try to click the "submit" button:
(index):24 Uncaught ReferenceError: fu is not defined
at HTMLButtonElement.onclick ((index):24)
Please see the following plunkr for my updated home.js file: https://plnkr.co/edit/9dFVHsFOCji1aE0ZeLRQ?p=preview
When using AMD you manage your dependencies by defining things as you have done with define() but client of module must import it using require() function, see docs, meanwhile you try to instantiate required module via new which is not correct.
To use some module in DOM handler you need extra wrapper e.g. your HTML would make onclick="whenClicked()" if you have this function in scope:
function whenClicked() {
require(['fileUpload'], function(fu) {
fu.showDialog();
});
}
assuming of course that 'fileUpload' is correctly specified AMD module.
EDIT: modified version of OP sample on Plunker:
https://plnkr.co/edit/QFckwndDicGpTfzhGwFC?p=preview
Note fileUpload.js module definition changed so that basic alert is displayed:
define([
"dijit/registry",
"dijit/Dialog",
"dijit/form/Button",
"dojo/domReady!"
], function (registry) {
return {
// Show the dialog
showDialog: function() {
//registry.byId("uploads").show();
alert("this is file upload mock");
}
}
});
as well as home.js hosting definition of whenClicked:
function whenClicked() {
require({
packages: [
{name: "fileUpload",
// location should point to fileUpload.js on your target server
location: "https://run.plnkr.co/uv2ILkhQpQC2wqRV",
main: "fileUpload"}
]},
['fileUpload'], function(fu) {
console.log("fileupload");
fu.showDialog();
});
}
Note that showing location of module is similar to what bRIMOs said in other answer. My approach configures however location only for this particular code wrapped by require; approach of bRIMOs is global.
Be aware however that Plunker is rebuilding location URL each time you reload editor :/ it effectively means tha you fix location prefix, run it fine, reload Plunker page, and it is broken again.
I think you missed to configure the path in dojo config in order to access the fileupload.js file by the AMD loader , In the dojoConfig doc there is many type of config ( basURl ,package , paths ...) , below you can see how to make configuration using packges , and dojo will load you files using require without any problem
So before loading your arcgis js api <script src="url_api_js"></script> be sur to do the folowing (configuring dojo with dojoConfig var)
<script type="text/javascript">
var dojoConfig = {
packages: [
{
name: "mypackage",
location: location.pathname.replace(/[^\/]+$/, '') +"/static"
}
]
};
<script>
<script src="url_api_js"></script>
and the inside your code use the name of package/name of file as below
require(['mypackage/fileUpload'], function(upload) {
upload.showDialog();
});
NB: the location could change , according to the server type , in this exemple the location is like : {location_name}/static/fileupload.js
hopefully this would help you .

Issue loading the backbone view for the first time

I want to load one of my javascript automatically on the load of my html page.
The html page on load of which I want to load my js file.
<!DOCTYPE html>
<html>
<head>
<script src="/static/js/LoginApp.js"></script>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="container">
<h1>Backbone Tutorial Blogroll App</h1>
<button type="button" id="newButton">Click Me!</button>
<script src="/static/js/require.js"></script>
<script src="/static/js/LoadView.js"></script>
</div>
</body>
</html>
The javascript I want to load is
LoadView.js
define([
'jquery',
'underscore',
'backbone',
'LoadView',
'text!NewViewCheck.html',
], function($, _, Backbone, LoadView, NewViewCheck) {
var Task = Backbone.Model.extend({
defaults: {}
});
TheView = Backbone.View.extend({
model: new Task(),
events: {
'click #newButton': 'initializeView',
},
//'template' provides access to instance data when rendering the view
template: _.template(NewViewCheck),
initialize: function() {
console.log('Inside the initialize function');
this.render();
},
render: function() {
//this.$el.html(this.template());
console.log(labelsLocale);
this.$el.html(this.template({}));
$('#dialogContent').empty().append(this.$el);
$('#addUserDefinedOption').modal('show');
},
initializeView: function() {
var theView = new TheView();
console.log('abc');
},
});
$(document).ready(function() {
//console.log('abc');
})
});
I am getting the following error
Uncaught Error: Mismatched anonymous define() module
Please help me thanks in advance.
The error is because you have:
<script src="/static/js/LoadView.js"></script>
The docs says:
If you manually code a script tag in HTML to load a script with an anonymous define() call, this error can occur.
And that's what you're doing.
And in solutions:
Be sure to load all scripts that call define() via the RequireJS API. Do not manually code script tags in HTML to load scripts that have define() calls in them.
If you manually code an HTML script tag, be sure it only includes named modules, and that an anonymous module that will have the same name as one of the modules in that file is not loaded.
So simply load it using requireJS from your main file or name the module

Where to reference JavaScript files for Ionic's template/[xxx].html

I am trying to reference JavaScript files for my Ionic Mobile Apps project's navigation.html, located inside the www/templates/ directory.
*Note : I created the project using the side menu template in Visual Studio 2015 and the project includes an index.html, and all those html pages located inside the www/templates/ directory are using the index.html, something like master page.
In my navigation.html, I have the following code snippet:
<ion-view view-title="Navigation">
<ion-content>
// my html codes will be stored here
</ion-content>
</ion-view>
I tried to reference the JavaScript files in the index.html but I received some error. So I wanna reference the JavaScript files inside the navigation.html. However, since my navigation.html does not have tags, like , , I created them inside the navigation.html. After modifying the navigation.html and putting the reference for the JavaScript files in the navigation.html, it looked like this.
<!DOCTYPE html>
<html>
<head>
// some js files
</head>
<body>
</body>
However, the javascript files are not loaded in the navigation.html. It is supposed to work as I have tried in notepad++, the same codes, and it worked perfectly. I have tried a couple different things, but cannot get the javascript files loaded in the navigation.html. Does anyone know a way I could make this work? Thanks.
If you want to load files (and plug in) only for some views instead of all your app you can use oclazy (https://github.com/ocombe/ocLazyLoad)
And use like this in your routing:
$stateProvider
.state("index", {
preload: true,
abstract: true, //<-- THIS IS A FATHER VIEW
url: "/index",
templateUrl: "/app/view/template/common/content.html"
})
.state("index.main", {
url: "/main",
templateUrl: "/app/view/template/home/home_new.html",
data: { pageTitle: "Home" },
controller: "HomeController",
controllerAs: "homeCtrl",
resolve: {
loadPlugin: function ($ocLazyLoad) { //<-- HERE YOU CAN LOAD FILES ONLY FOR YOUR ROUTING
return $ocLazyLoad.load([
{
name: "ngTagsInput",
files: ["/app/view/assets/lib/bower/ng-tags-input/ng-tags-input.js"]
},
]);
}
}
})

why doesn't this simple require.js setup work?

I'm trying to learn how to use require.js to load my scripts, but something is wrong with my setup/understanding. I can't see what is wrong. It is something simple with the setup that I'm missing.
When I load this index.html page in chrome, none of the script require.js action is working.
***index.html
<html>
<head>
<title>My Sample Project</title>
</head>
<body>
<h1 class="h1">sample project header</h1>
<script data-main="main" src="require.js"></script>
</body>
</html>
***main.js
(function() {
requirejs.config({
//By default load any module IDs from baseUrl
baseUrl: '',
// paths config is relative to the baseUrl, and
// never includes a ".js" extension
paths: {
'small-blue-mod': './a-script'
}
});
// Start the main app logic.
requirejs(['small-blue-mod'], function (sbm) {
alert(sbm.color);
});
})();
***small-blue-mod.js
define({
color: "blue",
size: "small"
});
*File System looks like...
index.html
main.js
require.js
FOLDER called "a-script"
a-script folder contains small-blue-mod.js
The path small-blue-mod refers to the a-script folder, either require it like small-blue-mod/small-blue-mod or recommended change your path to this:
paths: {
'small-blue-mod': './a-script/small-blue-mod'
}

Why is my javascript file not loading?

I'm new to both JavaScript & AngularJS. I'm building an app which talks to a building management system: it has a module called 'JaceMod' containing a service to contact the BMS and retrieve data from it. I'm adding functionality to graph data using Dygraphs, and I've created a directive to instantiate a graph and populate it with data.
I would like to put my Dygraphs directive into a module called 'dygraphs', in a separate file 'angular-dygraphs.js', so I can re-use it later, and require this module as a dependency in 'JaceMod'. Like this:
'use strict';
console.log('Loading angular-dygraphs.js');
angular.module('dygraphs', []);
angular.module('dygraphs').directive('mrhDygraph', function ($parse) {
return {
...etc ...
};
});
And then the main file 'app.js':
'use strict';
console.log('Loading app.js');
angular.module('JaceMod', ['dygraphs']);
angular.module('JaceMod').factory('JaceData', function ($http, $timeout) {
var JaceDataService = {};
...etc ...
return JaceDataService;
});
angular.module('JaceMod').controller('myCtrl', function myCtrl($scope, JaceData) {
JaceData.initialise($scope);
JaceData.subscribe($scope);
});
The html looks like this:
<html lang="en" ng-app="JaceMod">
<head>
<meta charset="utf-8">
<title>AngularJACE</title>
<style type="text/css">
body {font-family: Trebuchet MS,Helvetica,Arial,sans-serif; }
</style>
</head>
<body ng-controller="myCtrl">
<div mrh-dygraph="graphData"
mrh-dygraph-options="{xlabel: 'Local Time', legend: 'always',
showRangeSelector: true, labels: ['Time', 'Outside'],
ylabel: 'Temperature (ºC)', height: 420}"
style="width: 100%; height 420px;"/>
<script src="dygraph-combined.js"></script>
<script src="angular.js"></script>
<script src="angular-dygraphs.js"/>
<script src="app.js"></script>
</body>
But when I load this html, I see my console message 'Loading angular-dygraphs.js', followed by an eror 'Error: No module: JaceMod'. I never see the log message in app.js. If I switch the load order of the last 2 javascript files round, I see that app.js loads and the error message is 'Error: No module: dygraphs'. The second listed file seems never to be loaded.
If I copy the code from angular-dygraphs.js into app.js, leaving the directive in its own module, it works.
Why is this happening? Is it not possible to put modules in their own files, or something? The documents haven't been much help...
EDITED TO ADD
The html & js files are all in the same directory, including the dygraphs & angular libraries. I'm loading the html from file, no server involved.
UPDATE
I copied everything from angular-dygraphs.js into app.js, and commented out the entirety of angular-dygraphs.js: still getting the problem, app.js does not load.
Your angular-dygraphs.js script tag isn't closed so it never reads app.js. Script tags cannot be self-closing:
<script src="angular-dygraphs.js"/>
should be
<script src="angular-dygraphs.js"></script>

Categories

Resources