0% found this document useful (0 votes)

113 views

Ext Js

The document describes how to create an application using Ext JS. It covers downloading required resources, creating an application structure using Sencha Cmd, adding a loading page with a splash screen, and removing the splash screen once the app is loaded.

Uploaded by

Edison Tomas P

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

113 views

Ext Js

Uploaded by

Edison Tomas P

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 31

Create

Application using
Ext Js
By Dattu Dave

Create Application using Ext Js | 1

1. Getting All Required Resources

So these are the things we will develop, Now Let's start creating an application but before that
you should have following things to develop application in EXT- JS
I.Sencha Command - http://www.sencha.com/products/sencha-cmd/download
II.Java Sdk - http://www.oracle.com/technetwork/java/javase/downloads/index.html (it is
require to run sencha cmd properly)
III. A web server - Xampp (http://www.apachefriends.org/en/xampp.html) we will use PHP as
server side code we use database from xampp
IV. EXT JS : http://www.sencha.com/products/extjs/ (download Ext JS 4.x)
If you have all the above things in your pc, you can now start developing an application
First Extract the EXT JS zip file you have downloaded from above url, we are here using Ext Js
4 for developing our application so, if you have any older version please download Ext Js 4.x
version from http://www.sencha.com/products/extjs/
After downloading zip file extract the zip file into your servers root folder in our case we are
using xampp so extract inside htdocs folder and rename it to extjs.

2. Creating an Application structure using Sencha Cmd

The next step is to use the Sencha Cmd to create the application structure (MVC) for us. To do
so, we need to open the terminal application that comes with the operating system we use. For
Linux and Mac OS users, it is the terminal application, and for Windows users, the command
prompt application.
Now we need to change the current directory location in terminal or command prompt to Ext JS
directory (htdocs/extjs directory in this case), and then we will use the following command:
sencha generate app MyApp ../result as shown in following screenshot:

Sencha generate command is use to create an directory structure of Ext Js for that you must
require a directory of Ext Js thats why we change our current location in terminal to Ext Js
The directory structure of Ext Js follows MVC architecture, MyApp is the name of the
namespace of our application, meaning that every class we create is going to start with MyApp,
as for example: MyApp.model.Student, MyApp.view.Result, and so on. And the last argument
passed to the command is the directory where the application will be created. In this case it is
inside a folder named result, which is located inside the htdocsfolder.

Create Application using Ext Js | 2

So when we execute this command we get following output:

3. Creating the loading page

Let's start with the hands-on now!
First, we need to edit the result/app.js file. This is how the file looks like:
Ext.application({
name: 'MyApp',
views: [
'Main',
'Viewport'
],
controllers: [
'Main'
],
autoCreateViewport: true
});

Create Application using Ext Js | 3

We are going to change it so that it looks like the following(result/app.js):

Ext.application({
name: 'MyApp',
launch: function() {
console.log('launch');
}
});

On first line of the previous code we have the Ext.application declaration. This means that our
application will have a single page and the parent container of the app will be the Viewport. The
Viewport is a specialized container representing the viewable application area that is rendered
inside the body tag of the HTML page (<body></body>). It also manages the application's size
inside the browser and manages the window resizing.
Inside Ext.application we can also declare models, views, stores, and controllers used by the
application. We will add this information to this file as we create new classes for our project.
We need to declare the name of the application MyAPP which will be the namespace.
We can also create a launch function inside Ext.application. This function will be called after
all the application's controllers are initialized and this means that the application is completely
loaded. So this function is a good place to instantiate our main view. For now, we will only add
console.log, which just prints on the browser's JavaScript interpreter console to verify if the
application was loaded successfully.
To execute this application on the browser, we can access http://localhost/result, and we will
get the following output in console press(CTRL + SHIFT + I ) in chrome or (CTRL+SHIFT + K)
in firefox:

When working with large Ext JS applications, it is normal to have a small delay when loading
the application. This happens because Ext JS is loading all the required classes to have the

Create Application using Ext Js | 4

application up and running and meanwhile, all the users see is a blank screen, which can be
annoying for them. A very common solution to this problem is to have a loading page, also
known as a splash screen.
So let's add a splash screen to our application that looks like the following:

First we need to understand how this splash screen will work. At the moment the user loads the
application and the loading screen will be displayed. The application will show the splash screen
while it loads all the required classes and code so the application can be used.
We already know that the application calls the launch function when it is ready to be used. So we
know that we will need to remove the splash screen from the launch method. The question now
is where inside Ext.application can we call the splash screen? The answer is inside the init
function. The init function is called when the application boots so it gives some time for all
required code to be loaded and after that the launch function is called.
Now that we know how the splash screen will work, let's implement it.
Inside Ext.application, we will implement a function called init:
result/app.js
Ext.application({
name: 'MyApp',

Create Application using Ext Js | 5

init: function() {
splashscreen = Ext.getBody().mask('Loading Please Wait', 'splashscreen');
},
launch: function() {
console.log('launch');
}
});

All we need to do is apply a mask into the HTML body of the application (Ext.getBody()), and
that is why we are calling the mask method passing the loading message ("Loading Please
Wait") and applying a CSS, which will be loading gif and is already part of the Ext JS CSS
("splashscreen"). The mask method will return Ext.dom.Element, which we will need to
manipulate later (remove the mask from the HTML body) and for this reason, we need to keep a
reference to Ext.dom.Element and we will store this reference inside an attribute of
Ext.application:
result/app.js
Ext.application({
name: 'MyApp',
splashscreen: {},
init : function()
{

},
..

});
With the code of the init method only, we will have a loading screen as the following:

Create Application using Ext Js | 6

If this is all you need that is ok. But let's go a little bit further and customize the loading screen
adding a logo image so it can look like the first image of this topic, which is our final output.
First, we need to create a CSS file which will contain all the CSS for our application. First create
css folder inside result/resources/ and then create css file We will name it as app.css and put it
inside a result/resources/css/ folder:
Inside resources we will also create an images folder with the Attuneuniversity logo image.
We also must not forget to add the new CSS file into result/index.html:
<link rel="stylesheet" href="resources/css/app.css">
Now add following things to result/resources/css/app.css file we just created
.x-mask.splashscreen {
background-color: #efefef;
opacity: 1;
}
.x-mask-msg.splashscreen,
.x-mask-msg.splashscreen div {
font-size: 16px;
font-weight: bold;
padding-top : 17px;
padding-right : 40px;
border: none;
background-color: transparent;
background-position: top center;
}
.x-message-box .x-window-body .x-box-inner {
min-height: 93px !important;
}
.x-splash-icon {
background-image: url('../images/logo.png') !important;
background-repeat : no-repeat;
margin-top: -30px;
margin-bottom: 15px;
height: 100px;
width : 200px;
}
We will be adding a new CSS style to the loading DIV tag. Note that the following styles from
our app.css file will be applied: .x-mask.splashscreen and .x-mask-msg.splashscreendiv. This

Create Application using Ext Js | 7

will going to change the font of the "Loading Please Wait" message.
Now we will add the following code in the init function inside result/app.js:

init: function() {
splashscreen = Ext.getBody().mask('Loading Please Wait' , 'splashscreen');
splashscreen.addCls('splashscreen');
Ext.DomHelper.insertFirst(Ext.query('.x-mask-msg')[0], {
cls: 'x-splash-icon'
});
},
After we execute the previous code, we will have an output exactly as the image we showed at
the beginning of this topic.
Now we already have the splash screen being displayed. We need to work on the launch function
to remove the splash screen after all the code the application needs is loaded, otherwise the
loading message will be there indefinitely!
To remove the splash screen the only code we need to add to the launch function is the following
one, which is removing the mask from the HTML body:
result/app.js
Ext.getBody().unmask();
However, removing the mask abruptly is not nice because the user cannot even see the loading
message. Instead of only removing the mask, let's give the user 2 seconds to see the loading
message after the application is ready:
result/app.js
var task = new Ext.util.DelayedTask(function() {
Ext.getBody().unmask();
});
task.delay(2000);
To do so, we are going to use the DelayedTask class, which is a class that provides a chance of a
function to be executed after the given timeout in milliseconds. So in the case of the task, we are
removing the mask from the HTML body after two seconds of timeout (2,000 milliseconds).

Create Application using Ext Js | 8

If we test the output right now, it works, but it is still not nice for the user. It would be even better
if we can add an animation to the masking. So we will add a fade out animation (which animates
the opacity of an element from opaque to transparent) and after the animation we will remove the
masking (inside the Ext.util.DelayedTask function).
result/app.js
splashscreen.fadeOut({
duration: 1000,
remove:true
});
After we execute this code, notice that the loading message is still being displayed.Only the first
DIV tag with the class splashscreen was faded out. We need to also fade out the DIV tag with
class x-mask-msg splashscreen that contains the logo and the loading message.
result/app.js
splashscreen.next().fadeOut({
duration: 1000,
remove:true
});
After the loading mask is removed, we need to display the initial component of our application.
We will be showing a main screen that we will implement in the next. For now, we will add a
console message just to know where we need to call the initial component. The complete code
for the launch function will be the following :
result/app.js
launch: function() {
console.log('launch');
var task = new Ext.util.DelayedTask(function() {
splashscreen.fadeOut({
duration: 1000,
remove:true
});
splashscreen.next().fadeOut({
duration: 1000,

Create Application using Ext Js | 9

remove:true,
listeners: {
afteranimate: function(el, startTime, eOpts ){
// Here we put the code to display Our Main Screen
}}
});
Ext.getBody().unmask();
});
task.delay(2000);
}
});

4. Creating Main Screen

Now we are going to design our main screen but before that lets understand structure how we
create our main screen
We are going to divide main screen in four parts
I. Header
II. Grid Panel which display student records
III. Chart Which Display Result
IV. Footer
The Structure of our main screen is as below:

Create Application using Ext Js | 10

Header

Student Grid
Toolbar For Student Grid

Grid Comes here

Chart
Toolbar for Chart
Chart comes Here

Footer

Create Application using Ext Js | 11

This is how we create main page of our application we are dividing in to four parts Header,
Student Grid, Chart and last Footer
Now lets create a view port for that Create a file called MyViewport.js in result/app/view/
folder
result/app/view/MyViewport.js
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.myviewport',
layout: {
type: 'vbox' ,
align : 'stretch'
},
items: [
{
xtype: 'container',
layout : 'fit',
height: 50,
style: 'border-bottom: 4px solid #4c72a4;background-color : #B0C4DE',
html: '<div id="titleHeader">Result<span style="font-size:12px;"> - Student Result
Available Here</span></div>'
},
{
xtype: 'container', //Grid Panel Comes Here
flex : 1,
layout : 'fit',
style: 'background-color: #dedede;'
},
{
xtype: 'container',//Chart Panel Comes Here
flex : 2,
autoScroll : true,
},

Create Application using Ext Js | 12

{
xtype: 'container',
layout : 'fit',
height: 30,
style: 'border-top: 1px solid #4c72a4;background-color : #B0C4DE',
html: '<div id="titleHeader"><center><span style="font-size:10px;">Demo of Student
Result</span></center></div>'
}
]
});
And we get following output:

Now Lets Understand How can we create a main screen:

Ext.define is used to create a class in Ext Js

We have create a class MyApp.view.MyViewport now in that we created a namespace

MyApp now we have a view folder inside result/app/view and in that view folder we created
a class called MyViewport.js so we have the same class name MyViewport which is a
specialized container representing the viewable application area (the browser viewport). The
Viewport renders itself to the document body, and automatically sizes itself to the size of the
browser viewport and manages window resizing.

Create Application using Ext Js | 13

extend: 'Ext.container.Viewport' it means we are extending(inherit) it from

Ext.container.Viewport class this is Viewport.js file available in ext js liberary
result/ext/source/container/Container.js and we are define a container

alias: 'widget.myviewport',
this is we created an alias for our class
MyApp.view.MyViewport so we can use alias for the class so we can use it using alias
name myviewport

After that we create an layout properties here we use vbox layout it means all the
components are arranged in the vertical format and also we are using stretched align so each
component will take all space vertically

Then, we add items one by one

Xtype : container, it will create a container this is another way how we can create a
container
we create here four container as four items

we also specify height, style parameters and html parameters in items

5. Creating a grid for student details

Grid is used to display the data.
First Question come in to your mind is how will grid display data?
Answer is:
1. In Ext Js to Display Data First we have to create a model that defines the structure of
grid. in model we define What are the data grid contain and what type of the data.
2. Then we create a store, A store will fetch the data from server in json/xml format.
3. Then we create a gridpanel (View) which finally shows a data.
4. And last we create a controller to handle the events and functionality in the gridpanel
So Ext Js this way follows MVCS Model, View, Controller and Store architecture

5.1Crating A Modal For Grid

We are going to create a grid which will display Result of the Student i.e. Name, Age, Email-id
and Stander and subject name and marks for that we will create a model
In result/app/model folder we will create a file called Student.JS which will display the student
data

Create Application using Ext Js | 14

result/app/model/Student.js
Ext.define('MyApp.model.Student', {
extend: 'Ext.data.Model',
fields: [
{
name : 'id'
},
{
name: 'name'
},
{
name: 'age'
},
{
name: 'email'
},
{
name: 'sem'
},
{
name: 'photo'
},
{
name: 'Result'
}
]
});

We create a student model which is extend from Ext.data.Model. This model is having fields
required are id (student id), name, age, email, sem, photo and result details

5.2Creating Store for Grid

Now we will create a store which will fetch all student data in json format for that we create a
file called Students.js in result/app/store folder

Create Application using Ext Js | 15

result/app/store/Students.js
Ext.define('MyApp.store.Students', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Student'
],
model: 'MyApp.model.Student',
autoLoad : true,
proxy: {
type: 'ajax',
url: 'php/studentlist.php',
reader: {
type: 'json',
root: 'data'
}
}
});

We created a store which is extend from Ext.data.Store.

We require a model to load the data because store load the data according to model
We also provide autoload facility here so store is automatically loaded
Ext Js is client script and data store on database so to access the data we are using proxy. Type of
the proxy is ajax because we are making an ajax request for user interaction
We are fetching data from php file called studentlist.php which will send data in json format with
root is data

These are the two php file we are using to fetch the data

Create Application using Ext Js | 16

I.db.php created in result/php/db/ folder

result/php/db/db.php
<?php
$server = "127.0.0.1";
$user = "root";
$pass = "";
$dbName = "student";
$mysqli = new mysqli($server, $user, $pass, $dbName);
/* check connection */
if ($mysqli->connect_errno) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
else
{}
?>
II.
studentlist.php created in result/php/ folder
result/php/studentlist.php
<?php
require("db/db.php");
$folder = array();
$sql = "SELECT * FROM student_master";
if ($resultdb = $mysqli->query($sql))
{
while($r = $resultdb->fetch_assoc())
{
$sqlquery = "SELECT sub,marks FROM student_result WHERE student_id = $r[id]";
if ($nodes = $mysqli->query($sqlquery))
{
$count = $nodes->num_rows;
if ($count > 0)
{

Create Application using Ext Js | 17

$r['Result'] = array();
while ($item = $nodes->fetch_assoc())
{
$r['Result'][] = $item;
}
}

$folder[] = $r;
}
}
}
$resultdb->close();
$mysqli->close();

echo json_encode(array("data" => $folder)); //json format data

So we created a php files which will give the data in json format like this
{"data":[{"id":"1","name":"Raj
Patel","age":"17","email":"student1@demosite.com","sem":"1","photo":"1.jpg","Result":[{"sub":"
Maths","marks":"85"},{"sub":"Science","marks":"80"},{"sub":"English","marks":"72"}]},{"id":"2
","name":"Vishal
Joshi","age":"17","email":"student2@demosite.com","sem":"1","photo":"2.jpg","Result":[{"sub":"
Maths","marks":"25"},{"sub":"Science","marks":"65"},{"sub":"English","marks":"78"}]},{"id":"3
","name":"Riyaz
Khan","age":"17","email":"student3@demosite.com","sem":"1","photo":"1.jpg","Result":[{"sub":"
Maths","marks":"46"},{"sub":"Science","marks":"52"},{"sub":"English","marks":"88"}]},{"id":"4
","name":"Sonali
Sharma","age":"17","email":"student4@demosite.com","sem":"1","photo":"4.jpg","Result":[{"sub
":"Maths","marks":"88"},{"sub":"Science","marks":"26"},{"sub":"English","marks":"56"}]},{"id"
:"5","name":"Pankaj
Shah","age":"17","email":"student5@demosite.com","sem":"1","photo":"5.jpg","Result":[{"sub":"
Maths","marks":"90"},{"sub":"Science","marks":"89"},{"sub":"English","marks":"56"}]}]}

Create Application using Ext Js | 18

5.3 Creating a Grid Panel (View of the Grid)

Now we will create a grid panel in Ext Js for that first create file called StudentList.js.
result/app/view/StudentList.js
Ext.define('MyApp.view.StudentList', {
extend: 'Ext.grid.Panel',
alias: 'widget.studentlist',
frame: false,
store: 'Students'
columns: [
{
width: 150,
dataIndex: 'name',
text: 'Name',
flex : 2
},
{
width: 100,
dataIndex: 'age',
text: 'Age'
},
{
width: 250,
dataIndex: 'email',
text: 'Email id'
},
{
width: 250,
dataIndex: 'sem',
text: 'Semister',
},
{flex: 1,
dataIndex: 'photo',
itemId: 'photoimage',
text: 'Profile Photo',
renderer : function(val)
{
return '<img src=" resources/images/profilephoto/' + val + ' " width ="50" height="50">';
}

Create Application using Ext Js | 19

},
]
});
We create a grid panel Extend it from Ext.grid.Panel
Giving alias name to studentlist and frame property to false
Then we assign store Students i.e. MyApp.store.Students which will fetch the student data
Then we create a columns i.e name, age, sem, email and photo in columns dataIndex value
must match the field we created in model and fields which are return by php in json format
In photo filed we created a function so when this column is renderd it will give an
image(profile photo) so we can see a profile photo in the grid

5.4 Creating a controller for Gird Panel

Now we create a controller for grid panel as for that we create a file called Students.js
result/app/controller/Students.js:
Ext.define('MyApp.controller.Students', {
extend: 'Ext.app.Controller',
views: [
'StudentList',
],
refs: [
{
ref: 'studentList',
selector: 'studentlist'
},
],
stores: [
'Students',
],
init: function(application) {

Create Application using Ext Js | 20

this.control({
"studentlist": {
render: this.onRender,
},
});
if (!Ext.getStore('Students')) {
console.log ("store created");
Ext.create('MyApp.store.Students');
}
},
onRender: function(component, options) {
component.getStore().load();
},
});
We create a controller for the grid which is extend from the Ext.app.Controller
In this flie we create a all functionality and handles all events
Then we have the views declaration, which is where we are going to declare all the views that
this controller will care about.
we will create a reference for the studenlist component, where xtype is studentlist and we will
name ref as studentList. With this ref declared, the controller will automatically generate the
getStudentList() method for us to retrieve the reference of this component.
Next, we have the init method declaration. The init method is called before the application
boots, before the launch function of Ext.application (app.js). The controller will also load the
views, models, and stores declared inside its class.
Then we have the control method configured. This is where we are going to listen to all events
we want the controller to react.
Then we listen a event of render of Grid Panel stdentlist by creating function onRender when
a grid panel Studentlist is render this function will call
In that function we load the store of the grid so in grid we can see the data

Create Application using Ext Js | 21

5.5Make Changes in MyViewport.js

Open result/app/view/MyViewport.js and make following changes
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.myviewport',
requires: [
'MyApp.view.Students'
],
..
..
items:
[

{
xtype: 'students', //Grid Panel Comes Here
flex : 1,
layout : 'fit',
style: 'background-color: #dedede;'
},

]
});
Change the xtype to studentlist where we give comment gridpanels come here for that we
have to add requires property in MyViewport.js file because we want to use this class

5.6Make Changes into the app.js

Finally we have to make following changes to our result/app.js file

Ext.application({
name: 'MyApp',
splashscreen: {},
requires: [
'Ext.data.proxy.Ajax',
'MyApp.view.MyViewport'
],
controllers :[

Create Application using Ext Js | 22

'Students',
],
init : function(){

});
We have to put Ext.data.Ajax in requires otherwise it will give warning and we must not fotgot
to put controller we just created i.e.
So after all this changes we get following output:

6. Creating a Chart for Student Result

student result we are showing in chart for better view.

So when user click on grid panel item student result will see in the chart below of the grid
panel
So Again for chart we will design a model, store, view and controller.

6.1Creating a model for chart

Create Application using Ext Js | 23

First we create a model for chart we will display subject and marks in charts so in model we
define subject and marks
So create a file called StudentChart.js in result/app/model folder.
result/app/model/StudentChart.js
Ext.define('MyApp.model.StudentChart', {
extend: 'Ext.data.Model',
fields: [
{
name: 'sub'
},
{
name: 'marks'
}
]
});
We create a model for chart with fields sub and marks

6.2Creating a store for Chart

After creating a model next step is create a store so create a file called StudentChartStore.js in
result/app/store/ folder
result/app/store/StudentChartStore.js
Ext.define('MyApp.store.StudentChartStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.StudentChart'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'MyApp.model.StudentChart',
proxy: {
type: 'ajax',
reader: {
type: 'json'
}
}

Create Application using Ext Js | 24

}, cfg)]);
}
});
So we create a store for chart here we dont give any php file because we are going to use the
data fetch from stdentlist.php

6.3Creating a chart (View of Chart)

Here we are create a charts to view the result for that we will create a column chart
Create a file called ColumnChart.js in result/app/view folder
Ext.define('MyApp.view.ColumnChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.columnchart',
animate: true,
store: 'StudentChartStore',
shadow: true,
insetPadding: 60,
theme: 'Base:gradients',
axes: [{
type: 'Numeric',
position: 'left',
fields: ['marks'],
label: {
renderer: Ext.util.Format.numberRenderer('0')
},
title: 'Marks',
grid: true,
minimum: 0,
maximum: 100,
}, {
type: 'Category',
position: 'bottom',
fields: ['sub'],
title: 'Subject'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,

Create Application using Ext Js | 25

renderer: function(storeItem, item) {

if(storeItem.get('marks') >= 40)
{
this.setTitle(storeItem.get('sub') + ': ' + storeItem.get('marks') + ': Pass');
}
else
{
this.setTitle(storeItem.get('sub') + ': ' + storeItem.get('marks') + ': Failed');
}
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'marks',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'sub',
yField: 'marks'
}]
});

Here we create a column chart which is extend from Ext.chart.Chart.

We assign alias name which is columnchart and set animate property to true
Then we assign a store for chart i.e. StudentChartStore
After That we are define Axes of chart i.e. marks and subject
We are giving type of mark axes to numeric and position to left means marks are displayed
at left side of axes
We assign marks in field property so name marks is same as marks we got in json and
declare in model StudentChart
We define maximum and minimum property for marks because marks
Similarly we define axes for subject and give its type to category
After axes we define that series of chart is column.
We are assigning highlight to true it means when you hover the mouse on column of chart it
is get highlighted
Tips are the message we wanted to display here we wanted to show a message when you
hover mouse on column message will be displayed whether a student is passed or failed with
marks

Then we are going to display the mark inside column so we put label properties

And finally we will show subject on x-axes and marks on Y-axes

Create Application using Ext Js | 26

6.4Adding Functionalities to grid controller

Whenever user selects any student record from the grid panel, we will show result of that student
in chart
So we have to add our logic when grid panel is selected so
result/app/controller/Students.js and in that we are going to make following changes

open

the

Ext.define('MyApp.controller.Students', {
extend: 'Ext.app.Controller',
views: [ 'Students' ],
requires :
['MyApp.view.MyViewport',
'MyApp.view.ColumnChart',
'MyApp.util.Alert'
],
refs: [
{ ref: 'studentList',
selector: 'studentlist'
},
{ ref: 'ColumnChart',
selector: 'columnchart'
},
],
stores: [
'Students',
'StudentChartStore'
],
init: function(application) {
this.control({
"studentlist": {
render: this.onRender,
select : this.onGridpanelSelect
}
});
if (!Ext.getStore('Students')) {
Ext.create('MyApp.store.Students');
}

Create Application using Ext Js | 27

},
onRender: function(component, options) {
component.getStore().load();
},
onGridpanelSelect: function(rowmodel, record, index, eOpts) {
var qualityData = record.get('Result');
var maths = qualityData[0]['marks'];
var science = qualityData[1]['marks'];
var English = qualityData[2]['marks'];
var per = parseInt(maths) + parseInt(science) + parseInt(English);
per = parseFloat(per/3).toFixed(2);
if(maths < 40 || science < 40 || English <40)
{
var failsub = "";
if(maths < 40)
{failsub = "Maths";}
if(science < 40)
{failsub = failsub +" Science";}
if(English < 40)
{failsub = failsub +" English";}
MyApp.util.Alert.msg("Bad Luck", record.get('name') + " Failed The Exam
with" + per + "% in " + failsub);
}
else
{
MyApp.util.Alert.msg("Congratulation", record.get('name') + " Passed The
Exam with" + per + "%");
}
var chart = this.getColumnChart();
chart.store.loadData(qualityData);
},
});
We make changes to the controller first we added MyApp.view.ColumnChart and
MyApp.util.Alert in require property because we will use this classes in our controller
We are make one class Alert.js and put it inside result/app/util/ folder here we are not going to
show the code of that class it is used for display the message
Then we add columnchart in refs so we added reference of it and getColumnChart() method
automatically generated
Inside this.control function we add fuction onGridPanelSelect on select event of gridpanel

Create Application using Ext Js | 28

In onGridPanelSelect function first we fetch the result data from the store of the grid in
qualityData variable
From that result data we fetch marks of Maths, English, and Science and we put the logic of
calculating percentage and display the message whether student is passed or not
Finally we get an instance of chart by getCoulmnChart() method and load the store of the chart
by result data of grid store which contain marks and subject as json data. Thats why we can see
the chart of particular student selected in the grid

6.5Make Changes in MyViewport.js

{
xtype: columnchart, //Chart Panel Comes Here
flex : 1,
layout : 'fit',
style: 'background-color: #dedede;'
},

]
});
Change the xtype to columnchart where we give comment Chart Panel Comes Here for that
we have to add requires property in MyViewport.js file because we want to use this class

6.6Make Changes in result/app.js

Create Application using Ext Js | 29

Ext.application({
name: 'MyApp',
enableQuickTips : true,
splashscreen: {},
views : [
'Main',
'Viewport',
'MyViewport'
],
requires: [
'MyApp.view.MyViewport',
'Ext.data.proxy.Ajax',
'MyApp.util.Util',
'Ext.layout.container.Card',
'Ext.chart.series.Pie',
'Ext.chart.series.Column',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'MyApp.view.PieChart',
'MyApp.view.ColumnChart'
],
controllers :[
'Students',
],

init : function()
{

});

We added required components in required properties

So Now when user click on any student data from the grid panel the result of the student is
displayed in chart and message is displayed whether student is passed or failed in exam
When you hover a mouse on column of a chart the marks of the particular subject is
displayed with student is passed or failed in that subject