ExtJS : Structuring your App

In the last post we saw the basic files required to write an ExtJS application. Let’s look into how to structure our app. It’s highly recommended to use this kind of architecture.

Key Files in Architecture:

  • Models are business entities like customers, accounts etc.
  • Stores are collection of model instances. A store must know a model class.
  • View display data contained by the stores.
  • Controllers maps events to actions. They listen on button within views and update stores.

Pre-Requisites : ExtJS API, Browser, Eclipse, Server
However, we wont be connecting to backend data, so eclipse/server may not be compulsory. You can just have folder like structure having your extjs API,and files arranged in a similar fasion like explained below.

Create a dynamic web project in Eclipse. Following figure shows the folder structure:

EmployeeListProjectStructure

Index.html is your entry point. ‘extjs’ folder contains ExtJS API. As explained in previous tutorial ‘-all-’ will load all lib whereas other will load as needed. We need to load lib as we use it using ‘requires’ (eg. requires: [‘Ext.container.Viewport’]), for simplicity we will be using ‘all’ one. ‘resources’ contains your css/images etc. ‘app.js ‘ is starting point of your ExtJS code which will in turn call the model/view/controller.

Index.html:


<!DOCTYPE html>
<html>
<head>
<title>Employee List</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js :

</span>

Ext.application({
requires : [ 'Ext.container.Viewport' ],
name : 'EmpDetails',
appFolder : 'employeeListFolder',

launch : function() {
Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [
{
xtype : 'panel',
title : 'Employees',
html : 'Employee List'
}
]
});
}
});

Run the application

EmployeeListResult0

Index.html is pretty much self explanatory. App.js contains global settings for your application, as well as maintains references to all of the models, views and controllers used by the app. It also contains a launch function, which is run automatically when everything is loaded.

All Ext JS 4 applications should only use a single global variable, with all of the application’s classes nested inside it (EmpDetails). employeeListFolder is where all your controller/view etc are. It also have launch function that creates a Viewport and single panel that will fill the screen.

Adding further:

View

A View is nothing more than a Component, usually defined as a subclass of an Ext JS component. We’re going to create our Employee grid now by creating a new file called employeeListFolder/view/EmployeeView.js and putting the following into it:

 

<pre>Ext.define('EmpDetails.view.EmployeeView', {

extend : 'Ext.grid.Panel',
alias : 'widget.emplist',
title : 'Employees List',

columns : [
{
text : 'Name',
flex : 2
},
{
text : 'Email',
flex : 1
},
{
text : 'Phone',
flex : 1
}
]
});

Here we are defining (Ext.define – Defines a class) our EmployeeView by extending grid panel as we are going to display data in a tabular format. ‘alias’ is use, so as to directly use this view as an xtype in our app.js. It must be preceded by ‘widget’ keyword. ‘title’ for panel heading. ‘columns’ for number of columns. ‘flex’ is used for setting relative width, i.e whatever be the final width of this panel, the ‘Name’ column will occupy 50% of it and the other 2 columns 25% each.

Controllers

Controllers are the glue that binds an application together. All they really do is listen for events (usually from views) and take some actions. Lets make a controller under employeeListFolder/controller/ EmployeeController.js


Ext.define('EmpDetails.controller.EmployeeController', {

extend : 'Ext.app.Controller',
views : [ 'EmployeeView' ],

init : function() {
console.log('Controller InIt');
}

});

For now just define mention your view file name here.

Modifying app.js
As you can see we have added controller information here and now can directly use our view as an xtype using alias name.


Ext.application({
requires : [ 'Ext.container.Viewport' ],
name : 'EmpDetails',
appFolder : 'employeeListFolder',
controllers: ['EmployeeController'],
launch : function() {
Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [
{
xtype : 'emplist'
}
]
});
}
});

Lets run and check if everything is fine till now.

EmployeeListResult1

Creating Model and Store:

Lets create a model under employeeListFolder/model/EmployeeModel.js.

Ext.define('EmpDetails.model.EmployeeModel', {

extend: 'Ext.data.Model',

fields: ['name', 'email','phone']

});

A model should extend Ext.data.Model or another existing model.

Lets create a store unser employeeListFolder/store/EmployeeStore.js.


Ext.define('EmpDetails.store.EmployeeStore', {

extend: 'Ext.data.Store',

model: 'EmpDetails.model.EmployeeModel',

data: [

{name: 'Dhananjay1',email: 'asd@asd.asd',phone:'123123123'},

{name: 'Dhananjay2', email: 'qwe@qwe.qwe',phone:'123123123'}

]

});

A store must inherit from Ext.data.Store. It should specify a model cofig option. It may/may not have inline data.

Now we have to tell Controller and View about our store.

Updating EmployeeController, adding stores:


Ext.define('EmpDetails.controller.EmployeeController', {

extend : 'Ext.app.Controller',
views : [ 'EmployeeView' ],
stores:['EmployeeStore'],

init : function() {
console.log('Controller InIt');
}

});

Updating EmployeeView:


Ext.define('EmpDetails.view.EmployeeView', {

extend : 'Ext.grid.Panel',
alias : 'widget.emplist',
title : 'Employees List',
store : 'EmployeeStore',
columns : [ {
text : 'Name',
dataIndex:'name',
flex : 2
}, {
text : 'Email',
dataIndex:'email',
flex : 1
}, {
text : 'Phone',
dataIndex:'phone',
flex : 1
} ]
});

Above we added store information and mapped data accordingly.

Lets Run and check

EmployeeListResult2

In the next post we will continue with this application and connect with backend data.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: