Learn Ext JS which gives an basic idea of Ext Js, From Where u Can Download Ext Js and run an application, Features and Widget of Ext Js and more. Learn more http://www.attuneuniversity.com/courses/mobile/ext-js.html

1. Ext JS
Attune UniversityAttune University

2. What is Ext Js?
• Ext JS is a JavaScript library forExt JS is a JavaScript library for
building Rich Internet Applicationsbuilding Rich Internet Applications
• If you need complex components toIf you need complex components to
manage your information then Ext ismanage your information then Ext is
your best option your best option
2

3. From Where You Can Download?
• The first thing we should do is download the frameworkThe first thing we should do is download the framework
from the official website,from the official website,
http://www.sencha.com/products/extjs/http://www.sencha.com/products/extjs/
• If you want to use it online without downloading wholeIf you want to use it online without downloading whole
library you need following two fileslibrary you need following two files
• The CSS file:The CSS file:
http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-
all.cssall.css
• The JavaScript file: The JavaScript file:
http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.jshttp://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js
3

4. Supports Major Browser
• Ext JS supports all major web browsersExt JS supports all major web browsers
including: including:
• Internet Explorer 6+Internet Explorer 6+
• Firefox 3.6+ Firefox 3.6+
• Safari 3+X Safari 3+X
• Chrome 6+ TJSChrome 6+ TJS
• Opera 10.5+Opera 10.5+
4

5. MVC Application Architecture
• ModelModel
Model is a collection of fields and their data. Models knowModel is a collection of fields and their data. Models know
how to persist themselves through the data package.how to persist themselves through the data package.
• ViewView
View is any type of component - grids, trees and panels areView is any type of component - grids, trees and panels are
all views.all views.
• ControllersControllers
Controllers are special places to put all of the code thatControllers are special places to put all of the code that
makes your app work - whether that's rendering views,makes your app work - whether that's rendering views,
instantiating Models, or any other app logic.instantiating Models, or any other app logic.
5

6. Ext Js File Structure 6

7. Let's understand how it works
We have taken example of employee details, we want to seeWe have taken example of employee details, we want to see
list of employee in the grid panellist of employee in the grid panel
So we have app folder, inside app folder we have four moreSo we have app folder, inside app folder we have four more
folders i.e. model, view, controller and store and each folderfolders i.e. model, view, controller and store and each folder
contain one .js filecontain one .js file
Model folderModel folder
we have Employee.js which define model of employee withwe have Employee.js which define model of employee with
employee's properties like employee id, name, salary etc..employee's properties like employee id, name, salary etc..
View folderView folder
we have UserList.js this is view so we define user interfacewe have UserList.js this is view so we define user interface
here. So we create grid which will show list of employees.here. So we create grid which will show list of employees.
Store folderStore folder
we have created a file EmployeeService.js this will fetch allwe have created a file EmployeeService.js this will fetch all
the employee details we have stored in employeeData.jsonthe employee details we have stored in employeeData.json
file under data folder according to model Employee.jsfile under data folder according to model Employee.js
7

8. Cont... 8
• Controller folder:Controller folder:
Now we have created a grid panel which will show a list ofNow we have created a grid panel which will show a list of
employees, but what to do when user select row in grid, weemployees, but what to do when user select row in grid, we
want to do some action this all event handles here inwant to do some action this all event handles here in
EmpController.jsEmpController.js
• app.js:app.js:
This is file here we create detail about application and we haveThis is file here we create detail about application and we have
launch function which will launch our applicationlaunch function which will launch our application
• Index.html:Index.html:
Finally we have our html file i.e index.html in which we includeFinally we have our html file i.e index.html in which we include
our library ext-all.js , css file i.e. ext-all.css and app.js fileour library ext-all.js , css file i.e. ext-all.css and app.js file
and run this file on server to display resultand run this file on server to display result
• This is how the file structure of Ext Js works and follows MVCThis is how the file structure of Ext Js works and follows MVC
architecturearchitecture

9. Syntax 9
• Class DefinationClass Defination
Ext.define ('MyClass',Ext.define ('MyClass',
{{
prop1: val1,prop1: val1,
Prop2:val2Prop2:val2
......
});});
• InheritanceInheritance
Ext.define ('MyClass',Ext.define ('MyClass',
{extend: 'ParentClass',{extend: 'ParentClass',
……
});});
• Create ObjectCreate Object
var win = Ext.create ('Ext.window.Window', {id: 'win1'});var win = Ext.create ('Ext.window.Window', {id: 'win1'});

10.  GridsGrids
 ChartsCharts
 TabsTabs
 WindowsWindows
 TreesTrees
 DrawingDrawing
 Drag&DropDrag&Drop
 QuickTipsQuickTips
 ToolbarsToolbars
 MenusMenus
 ComboBoxComboBox
 Data ViewData View
 FormsForms
 Text EditorsText Editors
 PanelsPanels
 ButtonsButtons
 SliderSlider
Support Many Widget 10

11. Grids 11

12. Charts 12

13. Drag and Drop 13

14. Buttons, Toolbars & Menus 14

15. Tree 15

16. Forms 16

17. Example
Let's create one simple example which will show a panel with some form fields
we are going write a code in html file for this example but it is good to follow
MVCarchitecture when we create a big application
• Step1 :
<html>
<head>
<title>My first Example</title>
<!-- importing javascript library here -->
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"
></script>
<!-- importing css file here -->
<link type = "text/css" rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.0-
gpl/resources/css/ext-all.css"></link>
<script type="text/javascript">
//we write our code here
</script>
</head>
<body></body>
</html>
17

18. Cont…
• Step2 : we have created an html file now we are write all code in script tag
now we create a panel
<script>
Ext.onReady(function() // this will call after scripts are loaded
{
Ext.create("Ext.form.Panel" , // creating an instance of panel
{
title : "My First Panel", // title of panel
width : 700, // width of panel
height : 400, // height of panel
renderTo : Ext.getBody() //it will render panel on body of html
file
});
});
</script>
18

19. Cont…
• when you look in to browser it will look likewhen you look in to browser it will look like
19

20. Cont…
• Step3 : we now start insert items in panel
Ext.create("Ext.form.Panel",
{
title : "My First Panel",
width : 700,
height : 400,
renderTo:Ext.getBody() ,
layout : 'border', // we have set the border layout of panel which have east, west, south and north regions
items :[{
xtype : 'panel', // we add one more child panel
height : 400,
flex : 1, //it is take one part of parent(25%) width
region : 'west', //we have put this on west region
collapsible : true, // we make this panel collapsible
split : true // we can change width of panel
},
{
xtype : 'panel', // we create other child panel
height : 400,
flex : 3,// it uses 3part of parent width(75%) ratio
region : 'center', // we put this panel on center region
}]
});
20

21. Cont…
• when you look in to browser it will look likewhen you look in to browser it will look like
21

22. Cont…
• Step4 : Now we add form items in the second child panel.
{
xtype : 'panel',
height : 400,
flex : 3,
region : 'center',
bodyPadding : 10,
buttonAlign : 'center', // form buttons align to the center
items:[
{ xtype : 'textfield', // we have added textfield
fieldLabel : 'First Name', // name on left side of text field
name : 'fname', // this is require when we control this textfield
emptyText : "First Name", // shows when textfield is empty
allowBlank : false // validation it must require
},
{ xtype : 'textfield',
fieldLabel : 'Last Name',
name : 'lname',
allowBlank : false
},
22

23. Cont…
{ xtype : 'datefield', // we have added datefield for enter date
fieldLabel : 'Birthdate',
name : 'bdate',
format : 'd/m/Y', // format we have define
allowBlank : false ,
maxValue : new Date()// maximum birthday must be today
},
{ xtype : 'textfield',
fieldLabel : 'Email Id',
name : 'email',
allowBlank : false,
vtype : 'email‘// email type validation for user@example.com
} ]
}
23

24. Cont…
• Step5 :Now we add submit button in the second child panel for submit the data.
{
xtype : 'panel',
height : 400,
flex : 3,
region : 'center',
bodyPadding : 10,
buttonAlign : 'center', // form buttons align to the center
Items:[
...
...
],
buttons: [
{
text : "Submit",
handler : function() // this fuction executed on click of button
{
var form = this.up('form').getForm();
if(form.isValid())
{
Ext.Msg.alert("Great", "You Have Done A Great Job!"); //display message
}
else
{
Ext.Msg.alert("OOps", "You Have Made A Mistake!");
}
}
}
]
}
24

25. Cont…
• And we got following screen shotsAnd we got following screen shots
1)1)
25

26. Cont…
2)2)
26

27. Cont…
3)3)
27

28. Contact Us 28
Learn more about EXT JSLearn more about EXT JS
Click
Thanks,
Website: www.attuneuniversity.com
Email: contact@attuneuniversity.com
Phone: USA - +1-732-703-9847
India - +91-90999 12995
Singapore - +65-3158-5078