Getting Started With Ext Js

2,968 views

Published on

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.html

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,968
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
116
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Getting Started With Ext Js

  1. 1. Ext JS Attune UniversityAttune University
  2. 2. What is Ext Js? • Ext JS is a JavaScript library forExt JS is a JavaScript library for building Rich Internet Applicationsbuilding Rich Internet Applications • If you need complex components toIf you need complex components to manage your information then Ext ismanage your information then Ext is your best option your best option  2
  3. 3. From Where You Can Download? • The first thing we should do is download the frameworkThe first thing we should do is download the framework from the official website,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 wholeIf you want to use it online without downloading whole library you need following two fileslibrary you need following two files • The CSS file:The CSS file: http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext- all.cssall.css • The JavaScript file: The JavaScript file:  http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.jshttp://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js 3
  4. 4. Supports Major Browser • Ext JS supports all major web browsersExt 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
  5. 5. MVC Application Architecture • ModelModel Model is a collection of fields and their data. Models knowModel is a collection of fields and their data. Models know how to persist themselves through the data package.how to persist themselves through the data package. • ViewView View is any type of component - grids, trees and panels areView is any type of component - grids, trees and panels are all views.all views. • ControllersControllers Controllers are special places to put all of the code thatControllers are special places to put all of the code that makes your app work - whether that's rendering views,makes your app work - whether that's rendering views, instantiating Models, or any other app logic.instantiating Models, or any other app logic. 5
  6. 6. Ext Js File Structure 6
  7. 7. Let's understand how it works We have taken example of employee details, we want to seeWe have taken example of employee details, we want to see list of employee in the grid panellist of employee in the grid panel So we have app folder, inside app folder we have four moreSo we have app folder, inside app folder we have four more folders i.e. model, view, controller and store and each folderfolders i.e. model, view, controller and store and each folder contain one .js filecontain one .js file Model folderModel folder we have Employee.js which define model of employee withwe 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 folder we have UserList.js this is view so we define user interfacewe 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 folder we have created a file EmployeeService.js this will fetch allwe have created a file EmployeeService.js this will fetch all the employee details we have stored in employeeData.jsonthe 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
  8. 8. Cont... 8 • Controller folder:Controller folder: Now we have created a grid panel which will show a list ofNow we have created a grid panel which will show a list of employees, but what to do when user select row in grid, weemployees, but what to do when user select row in grid, we want to do some action this all event handles here inwant 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 haveThis is file here we create detail about application and we have launch function which will launch our applicationlaunch function which will launch our application • Index.html:Index.html: Finally we have our html file i.e index.html in which we includeFinally 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 fileour library ext-all.js , css file i.e. ext-all.css and app.js file and run this file on server to display resultand run this file on server to display result • This is how the file structure of Ext Js works and follows MVCThis is how the file structure of Ext Js works and follows MVC architecturearchitecture
  9. 9. 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'});
  10. 10.  GridsGrids  ChartsCharts  TabsTabs  WindowsWindows  TreesTrees  DrawingDrawing  Drag&DropDrag&Drop  QuickTipsQuickTips  ToolbarsToolbars  MenusMenus  ComboBoxComboBox  Data ViewData View  FormsForms  Text EditorsText Editors  PanelsPanels  ButtonsButtons  SliderSlider Support Many Widget 10
  11. 11. Grids 11
  12. 12. Charts 12
  13. 13. Drag and Drop 13
  14. 14. Buttons, Toolbars & Menus 14
  15. 15. Tree 15
  16. 16. Forms 16
  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 : <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
  18. 18. 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
  19. 19. Cont… • when you look in to browser it will look likewhen you look in to browser it will look like 19
  20. 20. 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
  21. 21. Cont… • when you look in to browser it will look likewhen you look in to browser it will look like 21
  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 }, 22
  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@example.com } ] } 23
  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()) { Ext.Msg.alert("Great", "You Have Done A Great Job!"); //display message } else { Ext.Msg.alert("OOps", "You Have Made A Mistake!"); } } } ] } 24
  25. 25. Cont… • And we got following screen shotsAnd we got following screen shots 1)1) 25
  26. 26. Cont… 2)2) 26
  27. 27. Cont… 3)3) 27
  28. 28. Contact Us 28 Learn more about EXT JSLearn 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

×