getting started with ext js
DESCRIPTION
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.htmlTRANSCRIPT
Ext JS
Attune UniversityAttune University
What is Ext Js?
• Ext JS is a JavaScript library for Ext JS is a JavaScript library for building Rich Internet building Rich Internet ApplicationsApplications
• If you need complex components If you need complex components to manage your information then to manage your information then Ext is your best option Ext is your best option
2
From Where You Can Download?
• The first thing we should do is download the The first thing we should do is download the framework from the official website,framework 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 If you want to use it online without downloading whole library you need following two fileswhole library you need following two files
• The CSS file:The CSS file:
http://cdn.sencha.io/ext-4.1.0-gpl/resources/http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.csscss/ext-all.css
• The JavaScript file: The JavaScript file: http://cdn.sencha.io/ext-4.1.0-gpl/ext-http://cdn.sencha.io/ext-4.1.0-gpl/ext-
all.jsall.js
3
Supports Major Browser
• Ext JS supports all major web browsers Ext 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
MVC Application Architecture
• ModelModel Model is a collection of fields and their data. Models Model is a collection of fields and their data. Models
know how to persist themselves through the data know how to persist themselves through the data package.package.
• ViewView View is any type of component - grids, trees and View is any type of component - grids, trees and
panels are all views.panels are all views.
• ControllersControllers Controllers are special places to put all of the code Controllers are special places to put all of the code
that makes your app work - whether that's rendering that makes your app work - whether that's rendering views, instantiating Models, or any other app logic.views, instantiating Models, or any other app logic.
5
Ext Js File Structure 6
Let's understand how it works
We have taken example of employee details, we want to We have taken example of employee details, we want to see list of employee in the grid panelsee list of employee in the grid panelSo we have app folder, inside app folder we have four more So we have app folder, inside app folder we have four more folders i.e. model, view, controller and store and each folders i.e. model, view, controller and store and each folder contain one .js filefolder contain one .js file
Model folderModel folderwe have Employee.js which define model of employee with we 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 folderwe have UserList.js this is view so we define user interface we 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 folderwe have created a file EmployeeService.js this will fetch all we have created a file EmployeeService.js this will fetch all the employee details we have stored in employeeData.json the 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
Cont... 8
• Controller folder:Controller folder:
Now we have created a grid panel which will show a list of Now we have created a grid panel which will show a list of employees, but what to do when user select row in grid, employees, but what to do when user select row in grid, we want to do some action this all event handles here in we want 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 This is file here we create detail about application and we have launch function which will launch our applicationhave launch function which will launch our application
• Index.html:Index.html:
Finally we have our html file i.e index.html in which we Finally 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 include our library ext-all.js , css file i.e. ext-all.css and app.js file and run this file on server to display resultapp.js file and run this file on server to display result
• This is how the file structure of Ext Js works and follows This is how the file structure of Ext Js works and follows MVC architectureMVC architecture
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'});
GridsGrids ChartsCharts TabsTabs WindowsWindows TreesTrees DrawingDrawing Drag&DropDrag&Drop QuickTipsQuickTips
Toolbars Toolbars MenusMenus ComboBoxComboBox Data ViewData View FormsForms Text EditorsText Editors PanelsPanels ButtonsButtons SliderSlider
Support Many Widget 10
Grids 11
Charts 12
Drag and Drop 13
Buttons, Toolbars & Menus 14
Tree 15
Forms 16
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
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
Cont…
• when you look in to browser it will look likewhen you look in to browser it will look like
19
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
Cont…
• when you look in to browser it will look likewhen you look in to browser it will look like
21
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
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 [email protected]
} ]
}
23
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 centerItems:[
...
... ],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
Cont…
• And we got following screen shotsAnd we got following screen shots
1)1)
25
Cont…
2)2)
26
Cont…
3)3)
27
Contact Us 28
Learn more about EXT JSLearn more about EXT JSClick
Thanks,Website: www.attuneuniversity.com
Email: [email protected]
Phone: USA - +1-732-703-9847 India - +91-90999 12995 Singapore - +65-3158-5078