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
![Page 1: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/1.jpg)
Ext JS
Attune UniversityAttune University
![Page 2: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/2.jpg)
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
![Page 3: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/3.jpg)
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
![Page 4: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/4.jpg)
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
![Page 5: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/5.jpg)
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
![Page 6: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/6.jpg)
Ext Js File Structure 6
![Page 7: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/7.jpg)
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
![Page 8: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/8.jpg)
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
![Page 9: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/9.jpg)
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'});
![Page 10: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/10.jpg)
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
![Page 11: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/11.jpg)
Grids 11
![Page 12: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/12.jpg)
Charts 12
![Page 13: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/13.jpg)
Drag and Drop 13
![Page 14: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/14.jpg)
Buttons, Toolbars & Menus 14
![Page 15: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/15.jpg)
Tree 15
![Page 16: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/16.jpg)
Forms 16
![Page 17: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/17.jpg)
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
![Page 18: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/18.jpg)
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
![Page 19: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/19.jpg)
Cont…
• when you look in to browser it will look likewhen you look in to browser it will look like
19
![Page 20: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/20.jpg)
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
![Page 21: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/21.jpg)
Cont…
• when you look in to browser it will look likewhen you look in to browser it will look like
21
![Page 22: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/22.jpg)
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
![Page 23: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/23.jpg)
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
![Page 24: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/24.jpg)
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
![Page 25: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/25.jpg)
Cont…
• And we got following screen shotsAnd we got following screen shots
1)1)
25
![Page 26: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/26.jpg)
Cont…
2)2)
26
![Page 27: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/27.jpg)
Cont…
3)3)
27
![Page 28: Getting Started With Ext Js](https://reader037.vdocuments.site/reader037/viewer/2022102621/54d7f0154a795983138b4590/html5/thumbnails/28.jpg)
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