Title: Getting Started With Ext Js
1Ext JS
Attune University
2What 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
3From 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
4Supports 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
5MVC 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.
6Ext Js File Structure
6
7Let'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
8Cont...
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
9Syntax
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
11Grids
11
12 12
Charts
13 13
Drag and Drop
14 14
Buttons, Toolbars Menus
15Tree
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)
28Contact 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