I've created my first extjs program using sencha called test and it has an index.html as the main page. I think there should be a way to initialize the app there's no mention of extjs script in index.html
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<title>Test</title>
<script type="text/javascript">
var Ext = Ext || {}; // Ext namespace won't be defined yet...
// This function is called by the Microloader after it has performed basic
// device detection. The results are provided in the "tags" object. You can
// use these tags here or even add custom tags. These can be used by platform
// filters in your manifest or by platformConfig expressions in your app.
//
Ext.beforeLoad = function (tags) {
...
//};
};
</script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="c0c58612-ec0d-4d6c-99a1-92decf199a29" type="text/javascript" src="bootstrap.js"></script>
</head>
<body></body>
</html>
To run a sencha app with extjs use sencha app watch
Related
I am newbie with protractor -- having a bit of trouble accessing an object defined in script loaded into the page being tested.
Here is the test:
describe('test SortedMap', function() {
beforeEach(function() {
browser.get('index.html');
})
it('should be initialized with zero elements', function() {
let sm = new SortedMap();
expect(sm.count).toEqual(0);
});
});
This is a little unit test of a SortedMap class I crafted for this page. The SortedMap class definition is in a script loaded by index.html at the end of the body. While the angular controller for this page is able to properly access the SortedMap class, the protractor test fails with a reference error on let sm = new SortedMap() and I can't seem to access it in my protractor test.
Here is the index page:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view="view1"></div>
<div>AngularJS seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="classes/classes.js"></script> // **<---The ES6 class SortedMap is defined in this script**
<script src="app.js"></script>
<script src="fringe/fringes_template.js"></script>
<script src="fringe/fringes.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="core/version/version.js"></script>
<script src="core/version/version-directive.js"></script>
<script src="core/version/interpolate-filter.js"></script>
</body>
</html>
The purpose of protractor is to test an application from the users perspective, which means act like a real user would (clicking buttons, moving through pages, checking correct elements are rendered on a page).
If you want to get access to some functionality directly this is not what Protractor meant to, it is a matter of unit tests, e.g. Karma and etc.
So, probably, you should rethink your test case scenario.
UPD:
Basically, the problem is that your class is not loaded into protractor context, you have to load this module via node.js as a module, see example. But new SortedMap() instance won't refer to a module, that was previously included via html script tag. It will be a brand new instance of SortedMap.
After all, if you still want to access same exact instance, I don't think it is possible, even if so, that is 100% incorrect approach, which leads to nowhere.
I have an EXTJS6.5 application. I want to use variables in my index.html that come from a properties file. However the change of the values of these variables should not require a new build of the application. This means that the variable can be changed if required (Without the need to build the extjs code).
Can someone please help with this?
I have already gone thru other threads where index.html can have placeholders, but do not seem to have a concrete example.
This is my properties file (Runtime.js)
{
"appUrl": "http://myappurl.com",
"appId": "10"
}
Then I want to use these variables in my index.html as such:
This is my index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<script src="Runtime.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="{{Runtime.appUrl}}/configuration/MyConstants.js"></script>
<script src="{{Runtime.appUrl}}/resources/mycharts/mycharts.js"></script>
<script src="{{Runtime.appUrl}}/resources/ckeditor/ckeditor.js"></script>
</body>
</html>
Will this work this way? Or pls suggest any better way to do this..thank you very much.
Given Runtime.js file has a syntax error. Is not valid javascript file.
Runtime.js should be:
window.appUrl="http://myappurl.com";
window.appId="10";
And you can use these variables like window.appUrl/window.appid in script block, not in html block.
You can do workaround to resolve the problem: You can generate includes from Runtime.js.
Example:
index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="Runtime.js"></script>
</body>
</html>
Runtime.js
window.appUrl="http://myappurl.com";
window.appId="10";
var script = document.createElement("script")
script.type = "text/javascript";
script.src = window.appUrl+"/configuration/MyConstants.js";
var script2 = document.createElement("script")
script2.type = "text/javascript";
script2.src = window.appUrl+"/resources/mycharts/mycharts.js";
var script3 = document.createElement("script")
script3.type = "text/javascript";
script3.src = window.appUrl+"/resources/ckeditor/ckeditor.js";
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script2);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script3);
Updated 2019-07-17:
If you want to require script before application launches you must add reference to script in app.json in js block (Which can't be done because you want to personalize the source of scripts).
Second option is change in app.js you can do Ext.Loader.loadScript like:
Ext.Loader.loadScript({
url: 'my.js',
onLoad: function(){
Ext.application({
name: 'Fiddle',
extend: 'Fiddle.Application',
autoCreateViewPort: false
});
},
onError: function(){
console.log('error');
}
});`
I am trying to use Yeoman for the first time.
And I want to use Bootstrap for CSS styling.
I've added it to the dependencies and I've npm installed it. It exist it node_modules.
Now I wonder if there is a smart way to require or include it to my project, or should I just go into index.html and reference it from modules?
index.js
var angular = require('angular');
var test = require('./app/controllers/main');
require('angular-ui-router');
var routesConfig = require('./routes');
require('./index.scss');
var app = 'app';
module.exports = app;
angular
.module(app, ['ui.router'])
.config(routesConfig)
.component('app', test);
index.html
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>Crossfit</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
</head>
<body ng-app="app">
<ui-view></ui-view>
</body>
</html>
Yeoman is a scaffolding tool used for webApps' creation : meaning it helps you with the creation of the basic skeleton (libs,code architecture and file organization ).
As for dependencies use inside your project, you need to implement it manually and according to your needs.
Since it's not a repetitive task, you don't need to automate it.
I have an interesting problem with the Cordova InAppBrowser plugin on ios where it will only start working after I leave the app. For example, when I hit a button in the app that should load the InAppBrowser, nothing happens. I can wait 5 or 10 minutes and nothing will happen. If I double tap home and bring up the recent apps view, the InAppBrowser loads immediately. If I hit home then return to the app, it loads right away. After it loads the first time, it works immediately every subsequent time without having to leave the app.
I've confirmed this is what is happening with breakpoints on the init of the InAppBrowser view and view controller in xcode. They only get called after leaving the app.
The app is a Sencha-Touch app on the latest framework and the xcode project and plugins were generated/installed using the latest version of Cordova and from the command line. The only file i've modified in the project from that generated by Cordova (aside from my apps files in www) is the index.html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyWebApp</title>
<script>
var Ext = Ext || {};
Ext.theme = {
name: "Default"
};
</script>
<script src="sencha-touch-all.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<link rel="stylesheet" href="resources/css/application.css">
<script src="resources/js/currencyFormatter.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
I am very new to using sencha. I have simple application and I want to add debug js library to see errors and warning. Problem is when I add this js to my app I see just blank screen and errors in this library. My index.html look like:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<script
src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/include-ext.js"></script>
<script
src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/options-toolbar.js"></script>
<script src="../../api-debug.js"></script>
<script src="app.js"></script>
<script src="ext-all-debug.js"></script>
</head>
<body></body>
</html>
when I remove ext-all-debug.js everything works.
So what I am doing wrong ?
You have added ExtJs twice. You don't need to add the JS file from their examples. You need to add ext-all-debug.js and the css file. Mine looks something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-debug.css"/>
<script src="ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body></body>
</html>
You might also want to have a look at the Sencha CMD that can create the setup for you:
sencha -sdk /path/to/sdk generate app
More info here: http://docs.sencha.com/extjs/4.2.0/#!/guide/command
To use dynamic loading of classes add this to your code:
Ext.Loader.setConfig({
enabled : true,
paths : {
Ext : "ext/src" //path to ext
//add custom/yourown namespaces here and their paths
}
});
And replace ext-all-debug.js with ext.js or ext-dev.js
<script src="../common/js/Ext/ext-dev.js" type="text/javascript"></script>
Use require in your code to let the loader know which classes to use:
Ext.require("Ext.form.Panel);