Getting Started With Ext Js

1
Ext JS
Attune University
2
What is Ext Js?
2

• Ext JS is a JavaScript library for building
  Rich Internet Applications
• If you need complex components to manage your
  information then Ext is your best option 

3
From Where You Can Download?
3

• The first thing we should do is download the
  framework from the official website,
• http//www.sencha.com/products/extjs/
• If you want to use it online without downloading
  whole library you need following two files
• The CSS file
• http//cdn.sencha.io/ext-4.1.0-gpl/resources/css/e
  xt-all.css
• The JavaScript file 
• http//cdn.sencha.io/ext-4.1.0-gpl/ext-all.js

4
Supports Major Browser
4

• Ext JS supports all major web browsers
  including 
• Internet Explorer 6
• Firefox 3.6 
•  Safari 3X 
• Chrome 6 TJS
• Opera 10.5

5
MVC Application Architecture
5

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

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

• Controller folder
• Now we have created a grid panel which will show
  a list of employees, but what to do when user
  select row in grid, we want to do some action
  this all event handles here in EmpController.js
• app.js
• This is file here we create detail about
  application and we have launch function which
  will launch our application
• Index.html
• 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 app.js file and run
  this file on server to display result
• This is how the file structure of Ext Js works
  and follows MVC architecture

9
Syntax
9

• Class Defination
• Ext.define ('MyClass',
• prop1 val1,
• Prop2val2
• ...
• )
• Inheritance
• Ext.define ('MyClass',
• extend 'ParentClass',
• )
• Create Object
• var win Ext.create ('Ext.window.Window', id
  'win1')

10
10
Support Many Widget

• Grids
• Charts
• Tabs
• Windows
• Trees
• Drawing
• DragDrop
• QuickTips

• Toolbars
• Menus
• ComboBox
• Data View
• Forms
• Text Editors
• Panels
• Buttons
• Slider

11
Grids
11
12
12
Charts
13
13
Drag and Drop
14
14
Buttons, Toolbars Menus
15
Tree
15
16
16
Forms
17
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
• lthtmlgt
• ltheadgt
• lttitlegtMy first Examplelt/titlegt
• lt!-- importing javascript library here --gt
• ltscript type"text/javascript" src"http//cdn.sen
  cha.io/ext-4.1.0-gpl/ext-all.js" gtlt/scriptgt
• lt!-- importing css file here --gt
• ltlink type "text/css" rel"stylesheet"
  href"http//cdn.sencha.io/ext-4.1.0-gpl/resources
  /css/ext-all.css"gtlt/linkgt
• ltscript type"text/javascript"gt
• //we write our code here
• lt/scriptgt
• lt/headgt
• ltbodygtlt/bodygt
• lt/htmlgt

18
18
Cont

• Step2 we have created an html file now we are
  write all code in script tag now we create a
  panel
• ltscriptgt
• 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
• )
• )
• lt/scriptgt

19
19
Cont

• when you look in to browser it will look like

20
20
Cont

• Step3 we now start insert items in panel
• Ext.create("Ext.form.Panel",
• title "My First Panel",
• width 700,
• height 400,
• renderToExt.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,

21
21
Cont

• when you look in to browser it will look like

22
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

23
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_at_example.com
24
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())

25
25
Cont

• And we got following screen shots
• 1)

26
26
Cont
2)
27
27
Cont
3)
28
Contact Us
28
Learn more about EXT JS Click Thanks, Website
www.attuneuniversity.com Email
contact_at_attuneuniversity.com Phone USA
- 1-732-703-9847 India - 91-90999
12995 Singapore - 65-3158-5078