The following article will walk through basic concepts and how to get a dynamic page up and running quickly. Let’s get start with something simple now.
Project Setup
The basic web structure here refer to how you arrange the web resources
- Create a project folder. Eg C:\Ext-workspace\webapp\
- Create a index.html files put under the webapp.
- Create a javascript files and named it as application.js that we will used it later.
- Create a lib folder and place all the extjs files inside
- Create the resource folder for images and css
- Create the user package name under the webapp/user
- Create the controller, model, store and view folder under the module package
-
-
+ [webapp]
-
+ index.html
-
+ application.js
-
+ [lib] <— ExtJS lib
-
+ [extjs]
-
+ [resources]
-
+ [css]
-
+ [images]
-
+ [user] <— module package name
-
+ [controller]
-
+ [model]
-
+ [store]
-
+ [view]
-
Everything start from “Hello World!”
Copy and paste the code below into the index.html
index.html
-
<html>
-
<head>
-
<title>Home</title>
-
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
-
<script type="text/javascript" src="lib/extjs/ext-debug.js"></script>
-
<script type="text/javascript" src="application.js" /></script>
-
</head>
-
<body>
-
</body>
-
</html>
Copy and paste the code below into the application.js
Application.js
-
-
Ext.application({
-
name: ‘Example’,
-
launch: function() {
-
Ext.create(‘Ext.container.Viewport’, {
-
layout: ‘fit’,
-
items: [
-
{ title: ‘Hello Ext’,
-
html : ‘Hello! Welcome to ext js’
-
}
-
]
-
});
-
}
-
});
Explaination
Ext.application { … } is a MVC approach to get start a single page application and display the content in a Viewport.
Ext.application instance given a name as ‘Example’ also known as namespace and it can be used by references for controller, view, model and other resources.
Ext.create start instantiate a class ‘Ext.container.Viewport’ as a string name parameter and set the fit layout and given the HTML content property.
A Viewport refer to a browser display area, it will auto resize accordingly. Whenever it’s ready by application, it will launch a function call to create the Viewport container to the document body.
The fit layout was using here mean to 100% screen fit. items[ ] refer to a group of properties where it defined title: is ‘Hello ExtJS’ and html: is the content.
Run on the server you should see something like above.
Download the example here
Posted in 
