Lets create a simple HelloWorld Page in EXT JS 4.2.
Basic Structure of application:
<application>
---- index.html
---- css folder
----- ext-all.css
----- ext-theme-classic folder
---- js folder
----- app.js
----- ext-debug.js
----- src folder
The above structure contains all the required css and javascript that will help us to create and run an EXTJS application. We will add all javascrupt code of application in app.js and include that in index.html
Add following code snippet in index.html
<html>
<head>
<title>HelloWorld!</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css">
<script type="text/javascript" src="js/ext-debug.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body></body>
</html>
Add follwing code snippet in app.js file
Ext.require('Ext.container.Viewport');
Ext.application({
name: 'HelloWorld',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello World',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
Save files and run the application. You will see below page as output.
Basic Structure of application:
<application>
---- index.html
---- css folder
----- ext-all.css
----- ext-theme-classic folder
---- js folder
----- app.js
----- ext-debug.js
----- src folder
The above structure contains all the required css and javascript that will help us to create and run an EXTJS application. We will add all javascrupt code of application in app.js and include that in index.html
Add following code snippet in index.html
<html>
<head>
<title>HelloWorld!</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css">
<script type="text/javascript" src="js/ext-debug.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body></body>
</html>
Add follwing code snippet in app.js file
Ext.require('Ext.container.Viewport');
Ext.application({
name: 'HelloWorld',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello World',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
Save files and run the application. You will see below page as output.
No comments:
Post a Comment