According to the example in this website, I followed the steps, but I dont get any output in the browser.
As Stated in the example, the file "index.html" should be in the following path
'D:\xampp\htdocs\helloext\extjs\index.html'
and its"index.html" contents are the following:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
when I run this example in both Chrome or FireFox, however, there is not output to be displayed.
Please guide me to have this samll example run correctly
Did you follow the instructions at the end of section 2.1 (Application Structure)? You need to create the app.js file:
Now you're ready to write your application code. Open app.js and
insert the following JavaScript code:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
Related
Currently I am building a Visual Studio Code Extension which will open a webview (html) as a preview. Currently it uses html as I've mentioned above to generate a view. I am currently looking to implement Monaco Editor inside of my extension code however I am unable to see the editor. I can only see the title:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>monaco editor</title>
<!-- MONACO CSS -->
<link rel="stylesheet" data-name="vs/editor/editor.main" href="_static/js/ext/monaco-editor/min/vs/editor/editor.main.css">
</head>
<body style="background-color: rgb(140, 190, 190);">
<h1>monaco editor</h1>
<div id="monaco_editor" style="height:400px">
</div>
<!-- MONACO JS -->
<script>var require = { paths: { 'vs': '_static/js/ext/monaco-editor/min/vs' } };</script>
<script src="_static/js/ext/monaco-editor/min/vs/loader.js"></script>
<script src="_static/js/ext/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="_static/js/ext/monaco-editor/min/vs/editor/editor.main.js"></script>
<script>
// CREATE AN EDITOR
var h_div = document.getElementById('monaco_editor');
var editor = monaco.editor.create(h_div, {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
</script>
</body>
</html>
Is this an issue with the paths not being present? Is there a better way to approach this?
I am making an application which will use users phone number to log in. So I am using digits api. Now I have seen how to use its web login. But I am not able to integrate it in my polymer web application.
<head>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<script id="digits-sdk" src="https://cdn.digits.com/1/sdk.js" async></script>
</head>
I pasted script in head tag as mentioned.
<script>
Polymer({
is: 'my-view1',
properties:{
textArea: {
type: String,
value: "this is text area",
notify: true,
reflectToAttribute: true
}
},
attached: function(){
console.log("Attached")
this.$.Digits.init({ consumerKey: 'YOUR KEY HERE' })
}
});
And one more doubt is that can i paste javascript script after Polymer({}); but under <script> tag? Will this create any problems. Or I have to write all my code under Polymer({});
this is my code at index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<script src="javascript/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="javascript/i18next-1.7.4.js" type="text/javascript"></script>
<title>i18next test</title>
</head>
<body>
<p id="id001" data-i18n="first_data">first</p>
</body>
<script type="text/javascript">
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
i18n.init({
lng: language,
resGetPath: 'locales/__lng__.json',
fallbackLng: "en",
}, function(){
$("first_data").i18n();
});
});
</script>
</html>
And I've created 2 json file at the same directory with index.html
locales/en.json
locales/de.json
json file content:
{
"first_data": "de-first-data"
}
Firefox try to load de.json and en.json but get the error 404.
Do you have any idea why i18next cannot load the json file.
This is my folder structure below:
index.html
locales/de.json
locales/en.json
javascript/i18next-1.7.4.js
javascript/jquery-1.11.1.min.js
You host application in IIS. IIS by default (as far as I know) doesn't support JSON file type.
Following question is related to same problem:
ERROR 404.3 Not Found for JSON file
Have you tried with ?
resGetPath: 'javascript/locales/__lng__.json',
I am following this small tutorial:
http://docs.sencha.com/extjs/4.2.1/#/guide/application_architecture
I have used the exact same file structure, but when I add the controller section of the tutorial (to my app.js), where the code says:
`Ext.application({
...
controllers: [
'Users'
],
...
});
I get the error shown on the attached image. The system is looking for the controller folder the wrong place. Instead of looking for the file in the following path:
accountmanager/app/controller/Users.js
it looks in:
accountmanager/app/ext-4/app/controller/Users.js
So looking at the tutorial I'm following, the place that causes the trouble, is the section "Defining a controller"
I'm not sure what I have done wrong, I've starred myself blind for an hour now. Here is the index.html file:
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Note the slight difference in the html. Fx. I have only changed the js src reference, since the one in the tutorial causes a 404
Can anyone help out. I'd be grateful.
Thanks in advance
In case you wanna see the app.js code as well:
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
controllers: [
'Users'
],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Your app.'s and index.html files is located in the wrong place.
Put it in the root account manager directory
I've split up my stylesheets into a separate module for each include, I want to dynamically load these but am having some dificulity, when rendered I only get the following for each sheet that should be loaded:
<link ng-repeat="inlude in includes" rel="stylesheet" href="" class="ng-scope">
Here is my HTML:
<!DOCTYPE html>
<html ng-app="forum" ng-controller="masterCtrl">
<head>
<title>Forum</title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<link ng-repeat="inlude in includes" rel="stylesheet" href="{{include.stylesheet}}">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers.js"></script>
<!--[if lt IE 9]>
<script src="/scripts/html5shiv.js"></script>
<![endif]-->
</head>
<body ng-view>
</body>
</html>
And here is my primary controller:
function masterCtrl($scope){
$scope.includes = {
header: {
src: 'views/includes/header.html',
stylesheet: 'stylesheets/header.css',
searchQuery: ''
},
threadList: {
src: 'views/includes/threadList.html',
stylesheet: 'stylesheets/threadList.css'
}
};
}
Everything else works fine, thanks for looking.
On top of changing your href to ng-href, revise your link like below, because you're not setting a source for the stylesheets.
<link ng-repeat="include in includes" rel="stylesheet" ng-href="include.stylesheet" class="ng-scope">
P.S. It wasn't working because you had a typo with include — inlude in includes.
Replace your href attributes with ng-href attributes. That approach won't be great for the speed of your page, though.
You can also check out AngularCSS
This Angular module allows you to reference stylesheets in your components (directives) and pages (routes).
If you are using directives
myApp.directive('miyDirective', function () {
return {
restrict: 'E',
templateUrl: 'my-directive/my-directive.html',
css: 'my-directive/my-directive.css'
}
});
If you are using ngRoute
$routeProvider
.when('/my-page', {
templateUrl: 'my-page/my-page.html',
controller: 'pageCtrl',
css: 'my-page/my-page.css'
});
You can also use it as a service ($css)
myApp.controller('pageCtrl', function ($scope, $css) {
// Binds stylesheet(s) to scope create/destroy events (recommended over add/remove)
$css.bind({
href: 'my-page/my-page.css'
}, $scope);
// Simply add stylesheet(s)
$css.add('my-page/my-page.css');
// Simply remove stylesheet(s)
$css.remove(['my-page/my-page.css','my-page/my-page2.css']);
// Remove all stylesheets
$css.removeAll();
});