ext-6 gpl hello world - javascript

i want to build applications with extjs, i downloaded the GPL version from sencha.com, in me html file i have the code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="../lib/extjs/build/resources/ext-watermark/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test ExtJs version 6</title>
<script type="text/javascript" src="../lib/extjs/build/ext-all-debug.js"></script>
<script type="text/javascript" src="../lib/extjs/build/ext-all.js"></script>
<script type="text/javascript" src="testExtJsscript.js"></script>
</head>
<body>
<h2>Test ExtJs</h2>
</body>
</html>
and in me testExtJsscript.js i have the code:
function mess(){
Ext.MessageBox.alert('info','Extjs4 est pret');
}
Ext.onReady(mess);
but the result is just like in the photo
i think that the problem is i haven't the right css file, in all documents there is a ext-all.css file and i can not find it?
I tried to install the trial version of sencha extjs, but the extraction is not working, i reach 42 % and i have problems (CRS faild) with *.png files
thanks for your help

The problem is that you are missing the css file. But anyway, you should not write the html file with the inclusion of the css and js files yourself. You should use Sencha Cmd right from the start, as #Evan suggests. http://docs.sencha.com/extjs/6.2.0/guides/getting_started/getting_started.html

The minimal html should be like this:
<!DOCTYPE html>
<html>
<head>
<link href="/ext/6.0.0/build/classic/theme-triton/resources/theme-triton-all.css" rel="stylesheet" />
<script src="/ext/6.0.0/build/ext-all.js"></script>
<script src="/ext/6.0.0/build/classic/theme-triton/theme-triton.js"></script>
</head>
<body>
<script>
Ext.onReady(function() {
Ext.Msg.alert('Welcome', 'Hello, World!');
});
</script>
</body>
</html>
See my online demos here:
ExtJS 6 Hello World Application
ExtJS 6 Hello World Application Using Ext Loader
ExtJS 6 "Hello World" Application - Modern Toolkit

Related

Why am I getting ERROR_FILE_NOT_FOUND after installing Semantic-UI?

Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css

How to create Global Js function using Angular 2+

I want to generate following html/js using angular 2+ as a output is there way to do it ?
index.html
app.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script type="text/javascript" src="function-file.js"></script>
</head>
<body>
</body>
</html>
app.js
function meetNowCallOnly(){
console.log('clicked');
}
You are probably looking for the build process of Angular. In angular you can do two kind of builds, JIT and AoT. You can have a look at https://angular.io/guide/deployment

How to use Mathquill on my website

I'm having problems in using mathquill on my website.
I'm new to this.
I'm stuck in this part
<link rel="stylesheet" type="text/css" href="/path/to/mathquill.css">`
<script src="/path/to/mathquill.min.js"></script>
I dont know what to put on the hrefs because I'm not seeing those files from mathquill file i got from github..
i downloaded the latest mathquill files and its inside htdocs(xampp) or www(wamp) together with my index.php.
Do i have to place my index.php inside mqthquill-0.10.1 folder?
Here is my
<link rel="stylesheet" href="/path/to/mathquill.css"/>
<script src="jquery-3.2.1.min.js"></script>
<script src="/path/to/mathquill.js"></script>
I appreciate if someone could give me the steps on how to use mathquill.
thanks in advance
Option 1
You can either download the mathquill.css and mathquill.js files from github and use them from your directory.
If you have your folder (directory) structure as below:
appFolder
.. scripts
.... mathquill.js
.... index.js
.. css
.... mathquill.css
myPage.html
Here's how you would reference the CSS and JS files:
<link rel="stylesheet" type="text/css" href="/css/mathquill.css">`
<script src="/scripts/mathquill.min.js"></script>
An easy way to check if your paths are correct is to put the entire URL in the browser's address bar. For example, if you are browsing the page as:
www.mydomain.com/mypage.html
The links to css and js files in the example folder structure I mentioned above would be:
www.mydomain.com/scripts/mathquill.js
www.mydomain.com/css/mathquill.css
Option 2
You could use the CDN to get the JS and CSS files on your page. Just copy the below two lines on to your html page, and you are ready to go.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.css">`
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js" type="text/javascript"></script>
<!-- COPY AND PAST THIS CODE HTML IN SOME EDITOR FOR BETTER VISUALIZATION, AFTER RUN-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Run Mathquill</title>
<!-- YOU NEED mathquill.css , jquery and mathquill.js SEARCH AND PICK IT SOMEWHERE, SEARCH ON THE WEB IF THIS DOWN NOT RUN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"></script>
<!-- INFORM THE LATEST AVERSION INTERFACE WITH THIS CODE -->
<script>
var MQ = MathQuill.getInterface(2);
</script>
</head>
<body>
<!--EXAMPLE COMMON TEXT TRANSFORMED WITH MATHQUILL -->
<p>Solve <span id="problem">f(x) = ax^2 + bx + c + = 0</span>.</p>
<script>
var problemSpan = document.getElementById('problem');
MQ.StaticMath(problemSpan);
</script>
<!-- EXAMPLE TO CREATE AN EDITABLE MATH FIELD -->
<p><span id="answer">x=</span></p>
<script>
var answerSpan = document.getElementById('answer');
var answerMathField = MQ.MathField(answerSpan, {
handlers: {
edit: function() {
var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
checkAnswer(enteredMath);
}
}
});
</script>
</body>
</html>

react.js chrome browser related issue

when I am typing react.js code that is given in bucky's react.js tutorial series it is not getting executed but when pasting it from bucky's github repo. it is getting executed.....Can any one help me out please...and the code is.
<html>
<head>
<title>
creating component
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\react.min.js"></script>
<script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\react-dom.min.js"></script><script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\browser.min.js"></script>
</head>
<body>
<div id="container_new"></div>
<script type="text/babel" >
var mycomponent=React.createClass({
render: function(){
return(<p>this is new component </p>);
}
});
ReactDOM.render(<mycomponent />,document.getElementById('container_new'));
</script>
</body>
</html>
I don't believe you can include the JavaScript files in the context of the location on your hard drive "c:\". I think you need to be running them using a web server (IIS, Node, etc.) and then include them using relative or absolute web paths (http://localhost/mytest/src/js/react-dom.min.js).

Difference between Samsung Smart TV apps with scenes and without?

Just a quick question. I'm using Samsung Smart TV SDK 5.1 and there are few JavaScript app templates. Cannot figure out why the template that uses scenes has this in index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/af/2.0.0/loader.js"></script>
</head>
<body>
</body>
</html>
And the other one (without scenes) has this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<!-- TODO : Common API -->
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<!-- TODO : Javascript code -->
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
<!-- TODO : Style sheets code -->
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">
<!-- TODO: Plugins -->
</head>
Thanks.
Scenes template includes Samsung's Framework loader.
Other template don't, and instead include couple platform API scripts.
You should really read developer guide http://www.samsungdforum.com/Guide/?FolderName=art00114&FileName=index.html

Categories

Resources