Ext JS Attune University
What is Ext Js? • 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
2
From Where You Can Download? • 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/extall.css • The JavaScript file: http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js
3
Supports Major Browser • Ext JS supports all major web browsers including: • • • • •
Internet Explorer 6+ Firefox 3.6+ Safari 3+X Chrome 6+ TJS Opera 10.5+
4
MVC Application Architecture • 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.
5
Ext Js File Structure
6
Let's understand how it works 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
7
Cont... • 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
8
Syntax • Class Defination Ext.define ('MyClass', { prop1: val1, Prop2:val2 ... }); • Inheritance Ext.define ('MyClass', {extend: 'ParentClass', … }); • Create Object var win = Ext.create ('Ext.window.Window', {id: 'win1'});
9
Support Many Widget Grids Charts
Toolbars Menus
Tabs Windows
ComboBox Data View
Trees Drawing
Forms Text Editors
Drag&Drop QuickTips
Panels Buttons Slider
10
Grids
11
Charts
12
Drag and Drop
13
Buttons, Toolbars & Menus
14
Tree
15
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 â&#x20AC;˘ Step1 : <html> <head> <title>My first Example</title> <!-- importing javascript library here --> <script type="text/javascript" ></script>
src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"
<!-- importing css file here --> <link type = "text/css" rel="stylesheet" gpl/resources/css/ext-all.css"></link> <script type="text/javascript"> //we write our code here </script> </head> <body></body> </html>
href="http://cdn.sencha.io/ext-4.1.0-
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 like
19
20
Contâ&#x20AC;Ś â&#x20AC;˘
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 }] });
Cont… • when you look in to browser it will look like
21
Contâ&#x20AC;Ś â&#x20AC;˘ 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â&#x20AC;Ś {
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â&#x20AC;&#x2DC;// email type validation for user@example.com
} ] }
23
Contâ&#x20AC;Ś â&#x20AC;˘ {
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
Cont… • And we got following screen shots 1)
25
Cont… 2)
26
Cont… 3)
27
Contact Us Learn 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
28