Your SlideShare is downloading. ×
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Introduction to Ext JS 4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to Ext JS 4

1,016

Published on

This is an introductional overview of Ext JS 4. It covers major areas of Ext JS and is more of an broad overview of the features Ext JS 4 provides.

This is an introductional overview of Ext JS 4. It covers major areas of Ext JS and is more of an broad overview of the features Ext JS 4 provides.

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

No Downloads
Views
Total Views
1,016
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Slide 1TEQneers GmbH & Co. KG www.teqneers.de
    • 2. Who? ‣ Stefan Gehrig ‣ @sgehrig ‣ gehrig@teqneers.de ‣ TEQneers GmbH & Co. KG, Stuttgart ‣ Software Architect, Senior Developer PHP & Javascript Slide 2TEQneers GmbH & Co. KG www.teqneers.de
    • 3. Slide 3TEQneers GmbH & Co. KG www.teqneers.de
    • 4. Products ‣ Ext JS 4.1 ‣ Sencha.io ‣ Ext JS 3.4 ‣ Ext Core ‣ Sencha GXT 3 ‣ Sencha SDK Tools ‣ Sencha Touch 2 ‣ JSBuilder ‣ Sencha Touch Charts ‣ Sencha Architect 2 ‣ Sencha Animator Slide 4TEQneers GmbH & Co. KG www.teqneers.de
    • 5. History ‣ 01/2006 Jack Slocum developed an extension for YUI called yui-ext ‣ 06/2006 Ext JS 1.1 with adapters for YUI, jQuery or Prototype ‣ 04/2008 Ext JS 2.0 (dual license GPLv3 + commercial) ‣ 07/2009 Ext JS 3.0 ‣ 06/2010 Raphaël + jQTouch + theJIT + Ext JS = Sencha ‣ 05/2011 Sencha Touch 1.0 and Ext JS 4.0 ‣ 04/2012 Ext JS 4.1 ‣ 06/2012 Sencha Touch 2.0 Slide 5TEQneers GmbH & Co. KG www.teqneers.de
    • 6. Some Ext JS experience? Slide 6TEQneers GmbH & Co. KG www.teqneers.de
    • 7. Some Ext JS experience? ‣ Who has already used Javascript Frameworks? Slide 6TEQneers GmbH & Co. KG www.teqneers.de
    • 8. Some Ext JS experience? ‣ Who has already used Javascript Frameworks? ‣ If so, which ones? Slide 6TEQneers GmbH & Co. KG www.teqneers.de
    • 9. Some Ext JS experience? ‣ Who has already used Javascript Frameworks? ‣ If so, which ones? ‣ Who knows Ext JS? Slide 6TEQneers GmbH & Co. KG www.teqneers.de
    • 10. Some Ext JS experience? ‣ Who has already used Javascript Frameworks? ‣ If so, which ones? ‣ Who knows Ext JS? ‣ Who has already worked with Ext JS? Slide 6TEQneers GmbH & Co. KG www.teqneers.de
    • 11. Some Ext JS experience? ‣ Who has already used Javascript Frameworks? ‣ If so, which ones? ‣ Who knows Ext JS? ‣ Who has already worked with Ext JS? ‣ If so, which version(s)? Slide 6TEQneers GmbH & Co. KG www.teqneers.de
    • 12. Ext JS 4.0/4.1 Slide 7TEQneers GmbH & Co. KG www.teqneers.de
    • 13. What are we talking about? Slide 8TEQneers GmbH & Co. KG www.teqneers.de
    • 14. What are we talking about? What is Ext JS? Slide 8TEQneers GmbH & Co. KG www.teqneers.de
    • 15. What are we talking about? What is Ext JS? Widgets Slide 8TEQneers GmbH & Co. KG www.teqneers.de
    • 16. What are we talking about? What is Ext JS? Widgets Layouts Slide 8TEQneers GmbH & Co. KG www.teqneers.de
    • 17. What are we talking about? What is Ext JS? Widgets Layouts Data Package Slide 8TEQneers GmbH & Co. KG www.teqneers.de
    • 18. What are we talking about? What is Ext JS? Widgets Layouts Data Package Class System Slide 8TEQneers GmbH & Co. KG www.teqneers.de
    • 19. What are we talking about? What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Slide 8TEQneers GmbH & Co. KG www.teqneers.de
    • 20. What are we talking about? What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Miscellaneous Slide 8TEQneers GmbH & Co. KG www.teqneers.de
    • 21. What are we talking about? What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Miscellaneous Theming Slide 8TEQneers GmbH & Co. KG www.teqneers.de
    • 22. What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Miscellaneous Theming Slide 9TEQneers GmbH & Co. KG www.teqneers.de
    • 23. „Full-Stack“- Javascript-Framework Slide 10TEQneers GmbH & Co. KG www.teqneers.de
    • 24. „Full-Stack“-Javascript-Framework Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 25. „Full-Stack“-Javascript-Framework ‣ Huge widget library Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 26. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ MVC application oriented code Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 27. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ MVC application oriented code ‣ Layouts Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 28. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ MVC application oriented code ‣ Layouts ‣ Data package Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 29. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ MVC application oriented code ‣ Layouts ‣ Data package ‣ Class system Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 30. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ MVC application oriented code ‣ Layouts ‣ Data package ‣ Class system ‣ DOM manipulation Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 31. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ MVC application oriented code ‣ Layouts ‣ Data package ‣ Class system ‣ DOM manipulation ‣ Templating Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 32. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ Drawing / charting ‣ MVC application oriented code ‣ Layouts ‣ Data package ‣ Class system ‣ DOM manipulation ‣ Templating Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 33. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ Drawing / charting ‣ MVC application ‣ AJAX oriented code (XMLHttpRequest) ‣ Layouts ‣ Data package ‣ Class system ‣ DOM manipulation ‣ Templating Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 34. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ Drawing / charting ‣ MVC application ‣ AJAX oriented code (XMLHttpRequest) ‣ Layouts ‣ Utilities ‣ Data package ‣ Class system ‣ DOM manipulation ‣ Templating Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 35. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ Drawing / charting ‣ MVC application ‣ AJAX oriented code (XMLHttpRequest) ‣ Layouts ‣ Utilities ‣ Data package ‣ Well documented API, clean code ‣ Class system ‣ DOM manipulation ‣ Templating Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 36. „Full-Stack“-Javascript-Framework ‣ Huge widget library ‣ Drawing / charting ‣ MVC application ‣ AJAX oriented code (XMLHttpRequest) ‣ Layouts ‣ Utilities ‣ Data package ‣ Well documented API, clean code ‣ Class system ‣ Re-usable code, ‣ DOM manipulation excellent cross- browser compatibility ‣ Templating Slide 11TEQneers GmbH & Co. KG www.teqneers.de
    • 37. Structure Slide 12TEQneers GmbH & Co. KG www.teqneers.de
    • 38. Structure Slide 13TEQneers GmbH & Co. KG www.teqneers.de
    • 39. Structure Slide 14TEQneers GmbH & Co. KG www.teqneers.de
    • 40. What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Miscellaneous Theming Slide 15TEQneers GmbH & Co. KG www.teqneers.de
    • 41. Ext.button.Button Slide 16TEQneers GmbH & Co. KG www.teqneers.de
    • 42. Ext.button.ButtonExt.create(Ext.Button, {! text: Click me,! renderTo: Ext.getBody(),! handler: function() {! ! alert(You clicked the button!);! }}); Slide 16TEQneers GmbH & Co. KG www.teqneers.de
    • 43. Ext.button.ButtonExt.create(Ext.Button, {! text: Click me,! renderTo: Ext.getBody(),! handler: function() {! ! alert(You clicked the button!);! }}); Slide 16TEQneers GmbH & Co. KG www.teqneers.de
    • 44. Ext.button.ButtonExt.create(Ext.Button, {! text: Click me,! renderTo: Ext.getBody(),! handler: function() {! ! alert(You clicked the button!);! }});Ext.create(Ext.Button, { renderTo: Ext.getBody(), text: Click Me, enableToggle: true}); Slide 16TEQneers GmbH & Co. KG www.teqneers.de
    • 45. Ext.button.ButtonExt.create(Ext.Button, {! text: Click me,! renderTo: Ext.getBody(),! handler: function() {! ! alert(You clicked the button!);! }});Ext.create(Ext.Button, { renderTo: Ext.getBody(), text: Click Me, enableToggle: true}); Slide 16TEQneers GmbH & Co. KG www.teqneers.de
    • 46. Ext.button.ButtonExt.create(Ext.Button, {! text: Click me,! renderTo: Ext.getBody(),! handler: function() {! ! alert(You clicked the button!);! }});Ext.create(Ext.Button, { renderTo: Ext.getBody(), text: Click Me, enableToggle: true}); Slide 16TEQneers GmbH & Co. KG www.teqneers.de
    • 47. Ext.button.ButtonExt.create(Ext.Button, {! text: Click me,! renderTo: Ext.getBody(),! handler: function() {! ! alert(You clicked the button!);! }});Ext.create(Ext.Button, { renderTo: Ext.getBody(), text: Click Me, enableToggle: true});Ext.create(Ext.Button, { text : Menu button, renderTo : Ext.getBody(), menu : [ {text: Item 1}, {text: Item 2}, {text: Item 3}, {text: Item 4} ]}); Slide 16TEQneers GmbH & Co. KG www.teqneers.de
    • 48. Ext.button.ButtonExt.create(Ext.Button, {! text: Click me,! renderTo: Ext.getBody(),! handler: function() {! ! alert(You clicked the button!);! }});Ext.create(Ext.Button, { renderTo: Ext.getBody(), text: Click Me, enableToggle: true});Ext.create(Ext.Button, { text : Menu button, renderTo : Ext.getBody(), menu : [ {text: Item 1}, {text: Item 2}, {text: Item 3}, {text: Item 4} ]}); Slide 16TEQneers GmbH & Co. KG www.teqneers.de
    • 49. Ext.form.Panel / Ext.form.* Slide 17TEQneers GmbH & Co. KG www.teqneers.de
    • 50. Ext.form.Panel / Ext.form.*Ext.create(Ext.form.Panel, {! frame: true,! title: Form Fields,! width: 340,! renderTo: Ext.getBody(),! bodyPadding: 5,! fieldDefaults: {! ! labelAlign: left,! ! labelWidth: 90,! ! anchor: 100%! },! items: [{! ! xtype: textfield,! ! name: textfield1,! ! fieldLabel: Text field,! ! value: Text field value! }, {! ! xtype: textfield,! ! name: password1,! ! inputType: password,! ! fieldLabel: Password field! }, {! ! xtype: filefield,! ! name: file1,! ! fieldLabel: File upload! }, {! ! xtype: textareafield,! ! name: textarea1,! ! fieldLabel: TextArea,! ! value: Textarea value! }, ...]}); Slide 17 TEQneers GmbH & Co. KG www.teqneers.de
    • 51. Ext.form.Panel / Ext.form.*Ext.create(Ext.form.Panel, {! frame: true,! title: Form Fields,! width: 340,! renderTo: Ext.getBody(),! bodyPadding: 5,! fieldDefaults: {! ! labelAlign: left,! ! labelWidth: 90,! ! anchor: 100%! },! items: [{! ! xtype: textfield,! ! name: textfield1,! ! fieldLabel: Text field,! ! value: Text field value! }, {! ! xtype: textfield,! ! name: password1,! ! inputType: password,! ! fieldLabel: Password field! }, {! ! xtype: filefield,! ! name: file1,! ! fieldLabel: File upload! }, {! ! xtype: textareafield,! ! name: textarea1,! ! fieldLabel: TextArea,! ! value: Textarea value! }, ...]}); Slide 17 TEQneers GmbH & Co. KG www.teqneers.de
    • 52. Ext.grid.Panel Slide 18TEQneers GmbH & Co. KG www.teqneers.de
    • 53. Ext.grid.PanelExt.create(Ext.data.Store, { storeId:simpsonsStore, fields:[name, email, phone], data:{items:[ { name: Lisa, "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { name: Bart, "email":"bart@simpsons.com", "phone":"555-222-1234" }, { name: Homer, "email":"home@simpsons.com", "phone":"555-222-1244" }, { name: Marge, "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: memory, reader: { type: json, root: items } }});Ext.create(Ext.grid.Panel, { title: Simpsons, store: Ext.data.StoreManager.lookup(simpsonsStore), columns: [ { header: Name, dataIndex: name }, { header: Email, dataIndex: email, flex: 1 }, { header: Phone, dataIndex: phone } ], height: 200, width: 400, renderTo: Ext.getBody()}); Slide 18TEQneers GmbH & Co. KG www.teqneers.de
    • 54. Ext.grid.PanelExt.create(Ext.data.Store, { storeId:simpsonsStore, fields:[name, email, phone], data:{items:[ { name: Lisa, "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { name: Bart, "email":"bart@simpsons.com", "phone":"555-222-1234" }, { name: Homer, "email":"home@simpsons.com", "phone":"555-222-1244" }, { name: Marge, "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: memory, reader: { type: json, root: items } }});Ext.create(Ext.grid.Panel, { title: Simpsons, store: Ext.data.StoreManager.lookup(simpsonsStore), columns: [ { header: Name, dataIndex: name }, { header: Email, dataIndex: email, flex: 1 }, { header: Phone, dataIndex: phone } ], height: 200, width: 400, renderTo: Ext.getBody()}); Slide 18TEQneers GmbH & Co. KG www.teqneers.de
    • 55. Ext.panel.Panel Slide 19TEQneers GmbH & Co. KG www.teqneers.de
    • 56. Ext.panel.PanelExt.create(Ext.panel.Panel, { bodyPadding: 5, width: 300, title: Filters, items: [{ xtype: datefield, fieldLabel: Start date }, { xtype: datefield, fieldLabel: End date }], renderTo: Ext.getBody()}); Slide 19TEQneers GmbH & Co. KG www.teqneers.de
    • 57. Ext.panel.PanelExt.create(Ext.panel.Panel, { bodyPadding: 5, width: 300, title: Filters, items: [{ xtype: datefield, fieldLabel: Start date }, { xtype: datefield, fieldLabel: End date }], renderTo: Ext.getBody()}); Slide 19TEQneers GmbH & Co. KG www.teqneers.de
    • 58. Ext.slider.* Slide 20TEQneers GmbH & Co. KG www.teqneers.de
    • 59. Ext.slider.* Ext.create(Ext.slider.Single, { width: 200, value: 50, increment: 10, minValue: 0, maxValue: 100, renderTo: Ext.getBody() }); Slide 20TEQneers GmbH & Co. KG www.teqneers.de
    • 60. Ext.slider.* Ext.create(Ext.slider.Single, { width: 200, value: 50, increment: 10, minValue: 0, maxValue: 100, renderTo: Ext.getBody() }); Slide 20TEQneers GmbH & Co. KG www.teqneers.de
    • 61. Ext.slider.* Ext.create(Ext.slider.Single, { width: 200, value: 50, increment: 10, minValue: 0, maxValue: 100, renderTo: Ext.getBody() });Ext.create(Ext.slider.Multi, { width: 200, values: [25, 50, 75], increment: 5, minValue: 0, maxValue: 100, constrainThumbs: false, renderTo: Ext.getBody()}); Slide 20TEQneers GmbH & Co. KG www.teqneers.de
    • 62. Ext.slider.* Ext.create(Ext.slider.Single, { width: 200, value: 50, increment: 10, minValue: 0, maxValue: 100, renderTo: Ext.getBody() });Ext.create(Ext.slider.Multi, { width: 200, values: [25, 50, 75], increment: 5, minValue: 0, maxValue: 100, constrainThumbs: false, renderTo: Ext.getBody()}); Slide 20TEQneers GmbH & Co. KG www.teqneers.de
    • 63. Ext.slider.* Ext.create(Ext.slider.Single, { Ext.create(Ext.slider.Single, { width: 200, width: 214, value: 50, minValue: 0, increment: 10, maxValue: 100, minValue: 0, useTips: true, maxValue: 100, tipText: function(thumb){ renderTo: Ext.getBody() return Ext.String.format(**{0}% complete**, thumb.value); }); }, renderTo: Ext.getBody() });Ext.create(Ext.slider.Multi, { width: 200, values: [25, 50, 75], increment: 5, minValue: 0, maxValue: 100, constrainThumbs: false, renderTo: Ext.getBody()}); Slide 20TEQneers GmbH & Co. KG www.teqneers.de
    • 64. Ext.slider.* Ext.create(Ext.slider.Single, { Ext.create(Ext.slider.Single, { width: 200, width: 214, value: 50, minValue: 0, increment: 10, maxValue: 100, minValue: 0, useTips: true, maxValue: 100, tipText: function(thumb){ renderTo: Ext.getBody() return Ext.String.format(**{0}% complete**, thumb.value); }); }, renderTo: Ext.getBody() });Ext.create(Ext.slider.Multi, { width: 200, values: [25, 50, 75], increment: 5, minValue: 0, maxValue: 100, constrainThumbs: false, renderTo: Ext.getBody()}); Slide 20TEQneers GmbH & Co. KG www.teqneers.de
    • 65. Ext.tab.Panel Slide 21TEQneers GmbH & Co. KG www.teqneers.de
    • 66. Ext.tab.Panel Ext.create(Ext.tab.Panel, { width: 300, height: 200, activeTab: 0, items: [ { title: Tab 1, bodyPadding: 10, html : A simple tab }, { title: Tab 2, html : Another one } ], renderTo : Ext.getBody() }); Slide 21TEQneers GmbH & Co. KG www.teqneers.de
    • 67. Ext.tab.Panel Ext.create(Ext.tab.Panel, { width: 300, height: 200, activeTab: 0, items: [ { title: Tab 1, bodyPadding: 10, html : A simple tab }, { title: Tab 2, html : Another one } ], renderTo : Ext.getBody() }); Slide 21TEQneers GmbH & Co. KG www.teqneers.de
    • 68. Ext.toolbar.Toolbar Slide 22TEQneers GmbH & Co. KG www.teqneers.de
    • 69. Ext.toolbar.Toolbar Ext.create(Ext.toolbar.Toolbar, { renderTo: document.body, width : 500, items: [ { text: Button }, { xtype: splitbutton, text : Split Button }, ->, { xtype : textfield, name : field1, emptyText: enter search term }, -, text 1, { xtype: tbspacer }, text 2, { xtype: tbspacer, width: 50 }, text 3 ] }); Slide 22TEQneers GmbH & Co. KG www.teqneers.de
    • 70. Ext.toolbar.Toolbar Ext.create(Ext.toolbar.Toolbar, { renderTo: document.body, width : 500, items: [ { text: Button }, { xtype: splitbutton, text : Split Button }, ->, { xtype : textfield, name : field1, emptyText: enter search term }, -, text 1, { xtype: tbspacer }, text 2, { xtype: tbspacer, width: 50 }, text 3 ] }); Slide 22TEQneers GmbH & Co. KG www.teqneers.de
    • 71. Ext.tree.Panel Slide 23TEQneers GmbH & Co. KG www.teqneers.de
    • 72. Ext.tree.Panelvar store = Ext.create(Ext.data.TreeStore, { root: { expanded: true, children: [ { text: "detention", leaf: true }, { text: "homework", expanded: true, children: [ { text: "book report", leaf: true }, { text: "alegrbra", leaf: true} ] }, { text: "buy lottery tickets", leaf: true } ] }});Ext.create(Ext.tree.Panel, { title: Simple Tree, width: 200, height: 150, store: store, rootVisible: false, renderTo: Ext.getBody()}); Slide 23TEQneers GmbH & Co. KG www.teqneers.de
    • 73. Ext.tree.Panelvar store = Ext.create(Ext.data.TreeStore, { root: { expanded: true, children: [ { text: "detention", leaf: true }, { text: "homework", expanded: true, children: [ { text: "book report", leaf: true }, { text: "alegrbra", leaf: true} ] }, { text: "buy lottery tickets", leaf: true } ] }});Ext.create(Ext.tree.Panel, { title: Simple Tree, width: 200, height: 150, store: store, rootVisible: false, renderTo: Ext.getBody()}); Slide 23TEQneers GmbH & Co. KG www.teqneers.de
    • 74. Ext.window.MessageBox Slide 24TEQneers GmbH & Co. KG www.teqneers.de
    • 75. Ext.window.MessageBoxExt.Msg.show({ title:Save Changes?, msg: You are closing a tab that has unsaved changes. Would you like to save yourchanges?, buttons: Ext.Msg.YESNOCANCEL, icon: Ext.Msg.QUESTION}); Slide 24 TEQneers GmbH & Co. KG www.teqneers.de
    • 76. Ext.window.MessageBoxExt.Msg.show({ title:Save Changes?, msg: You are closing a tab that has unsaved changes. Would you like to save yourchanges?, buttons: Ext.Msg.YESNOCANCEL, icon: Ext.Msg.QUESTION}); Slide 24 TEQneers GmbH & Co. KG www.teqneers.de
    • 77. Ext.window.Window Slide 25TEQneers GmbH & Co. KG www.teqneers.de
    • 78. Ext.window.WindowExt.create(Ext.window.Window, { title: Hello, height: 200, width: 400, layout: fit, items: { xtype: grid, border: false, columns: [{header: World}], store: Ext.create(Ext.data.ArrayStore, {}) }}).show(); Slide 25TEQneers GmbH & Co. KG www.teqneers.de
    • 79. Ext.window.WindowExt.create(Ext.window.Window, { title: Hello, height: 200, width: 400, layout: fit, items: { xtype: grid, border: false, columns: [{header: World}], store: Ext.create(Ext.data.ArrayStore, {}) }}).show(); Slide 25TEQneers GmbH & Co. KG www.teqneers.de
    • 80. What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Miscellaneous Theming Slide 26TEQneers GmbH & Co. KG www.teqneers.de
    • 81. Layouts ‣ Ext JS applications are build on components ‣ Containers are specialized components that contain other components (or containers) ‣ Sizing and positioning of a containers‘ children is determined by the specified layout Slide 27TEQneers GmbH & Co. KG www.teqneers.de
    • 82. Ext.layout.* Slide 28TEQneers GmbH & Co. KG www.teqneers.de
    • 83. Examples Slide 29TEQneers GmbH & Co. KG www.teqneers.de
    • 84. What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Miscellaneous Theming Slide 30TEQneers GmbH & Co. KG www.teqneers.de
    • 85. Overview Slide 31TEQneers GmbH & Co. KG www.teqneers.de
    • 86. Overview Slide 32TEQneers GmbH & Co. KG www.teqneers.de
    • 87. Overview ‣ implements Active Record pattern on the client side (sort of) Slide 32TEQneers GmbH & Co. KG www.teqneers.de
    • 88. Overview ‣ implements Active Record pattern on the client side (sort of) ‣ abstracts CRUD operations regardless of Slide 32TEQneers GmbH & Co. KG www.teqneers.de
    • 89. Overview ‣ implements Active Record pattern on the client side (sort of) ‣ abstracts CRUD operations regardless of ‣ the underlying storage mechanism Slide 32TEQneers GmbH & Co. KG www.teqneers.de
    • 90. Overview ‣ implements Active Record pattern on the client side (sort of) ‣ abstracts CRUD operations regardless of ‣ the underlying storage mechanism ‣ remote (AJAX, JSON-P or Ext.direct) Slide 32TEQneers GmbH & Co. KG www.teqneers.de
    • 91. Overview ‣ implements Active Record pattern on the client side (sort of) ‣ abstracts CRUD operations regardless of ‣ the underlying storage mechanism ‣ remote (AJAX, JSON-P or Ext.direct) ‣ local (memory, local/session storage) Slide 32TEQneers GmbH & Co. KG www.teqneers.de
    • 92. Overview ‣ implements Active Record pattern on the client side (sort of) ‣ abstracts CRUD operations regardless of ‣ the underlying storage mechanism ‣ remote (AJAX, JSON-P or Ext.direct) ‣ local (memory, local/session storage) ‣ the data format Slide 32TEQneers GmbH & Co. KG www.teqneers.de
    • 93. Overview ‣ implements Active Record pattern on the client side (sort of) ‣ abstracts CRUD operations regardless of ‣ the underlying storage mechanism ‣ remote (AJAX, JSON-P or Ext.direct) ‣ local (memory, local/session storage) ‣ the data format ‣ JSON Slide 32TEQneers GmbH & Co. KG www.teqneers.de
    • 94. Overview ‣ implements Active Record pattern on the client side (sort of) ‣ abstracts CRUD operations regardless of ‣ the underlying storage mechanism ‣ remote (AJAX, JSON-P or Ext.direct) ‣ local (memory, local/session storage) ‣ the data format ‣ JSON ‣ XML Slide 32TEQneers GmbH & Co. KG www.teqneers.de
    • 95. Overview ‣ implements Active Record pattern on the client side (sort of) ‣ abstracts CRUD operations regardless of ‣ the underlying storage mechanism ‣ remote (AJAX, JSON-P or Ext.direct) ‣ local (memory, local/session storage) ‣ the data format ‣ JSON ‣ XML ‣ works seamlessly with all data bound widgets Slide 32TEQneers GmbH & Co. KG www.teqneers.de
    • 96. Example Slide 33TEQneers GmbH & Co. KG www.teqneers.de
    • 97. What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Miscellaneous Theming Slide 34TEQneers GmbH & Co. KG www.teqneers.de
    • 98. A class system in Javascript- why? Slide 35TEQneers GmbH & Co. KG www.teqneers.de
    • 99. Javascript is a class- less, prototype-based language Slide 36TEQneers GmbH & Co. KG www.teqneers.de
    • 100. Class System Slide 37TEQneers GmbH & Co. KG www.teqneers.de
    • 101. Class System ‣ most developers are more familiar with class- based languages Slide 37TEQneers GmbH & Co. KG www.teqneers.de
    • 102. Class System ‣ most developers are more familiar with class- based languages ‣ Code based on a class system is easier to handle Slide 37TEQneers GmbH & Co. KG www.teqneers.de
    • 103. Class System ‣ most developers are more familiar with class- based languages ‣ Code based on a class system is easier to handle ‣ predictable strcutures Slide 37TEQneers GmbH & Co. KG www.teqneers.de
    • 104. Class System ‣ most developers are more familiar with class- based languages ‣ Code based on a class system is easier to handle ‣ predictable strcutures ‣ easily identifiable extension points Slide 37TEQneers GmbH & Co. KG www.teqneers.de
    • 105. Class System ‣ most developers are more familiar with class- based languages ‣ Code based on a class system is easier to handle ‣ predictable strcutures ‣ easily identifiable extension points ‣ less maintenance required Slide 37TEQneers GmbH & Co. KG www.teqneers.de
    • 106. Example Ext.define(My.sample.Person, { name: Unknown, constructor: function(name) { if (name) { this.name = name; } }, eat: function(foodType) { console.log(this.name + " is eating: " + foodType); } }); Ext.define(My.sample.Tattletale, { ! extend: My.sample.Person, say: function(something) { console.log(this.name + " says: " + something); } }); var aaron = Ext.create(My.sample.Person, Aaron); aaron.eat("Salad"); var maria = Ext.create(My.sample.Tattletale, Maria); maria.eat("Sausage"); maria.say("Bla bla blub"); Slide 38TEQneers GmbH & Co. KG www.teqneers.de
    • 107. Statics Ext.define(Computer, { statics: { instanceCount: 0, factory: function(brand) { return new this(brand); } }, ! brand: null, constructor: function(brand) { this.brand! = brand; this.self.instanceCount ++; } }); var dellComputer = Computer.factory(Dell); var appleComputer = Computer.factory(Mac); alert(appleComputer.brand); alert(Computer.instanceCount); Slide 39TEQneers GmbH & Co. KG www.teqneers.de
    • 108. Config Ext.define(MyClass, { config: { title: Default Title }, applyTitle: function(newTitle) { if (!Ext.isString(newTitle) || newTitle.length === 0) { throw Error: Title must be a valid non-empty string; } else { return newTitle; } } ! /* ! getTitle: function() { return this.title; }, setTitle: function(newTitle) { this.title! = this.applyTitle(newTitle); } ! */ }); Slide 40TEQneers GmbH & Co. KG www.teqneers.de
    • 109. Mixins Slide 41TEQneers GmbH & Co. KG www.teqneers.de
    • 110. Singleton Ext.define(Logger, { singleton: true, log: function(msg) { console.log(msg); } }); Logger.log(Hello); Slide 42TEQneers GmbH & Co. KG www.teqneers.de
    • 111. The Class Definition Pipeline Slide 43TEQneers GmbH & Co. KG www.teqneers.de
    • 112. Summary ‣ Class system combines classic and well-known methodologies with the dynamic nature of Javascript ‣ When sticking to the naming convention (compare to PSR-0 in PHP) Ext JS provides dynamic code loading (auto-loading) ‣ Class system is the foundation of the whole framework (more than 300 shipped classes) Slide 44TEQneers GmbH & Co. KG www.teqneers.de
    • 113. What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Miscellaneous Theming Slide 45TEQneers GmbH & Co. KG www.teqneers.de
    • 114. DOM Manipulation ‣ comparable to the functionality provided by jQuery ‣ not as sophisticated ‣ not as fast ‣ syntax not as sleek ‣ but absolutely sufficient when working inside the widget system Slide 46TEQneers GmbH & Co. KG www.teqneers.de
    • 115. Features Slide 47TEQneers GmbH & Co. KG www.teqneers.de
    • 116. Features ‣ DOM manipulation Slide 47TEQneers GmbH & Co. KG www.teqneers.de
    • 117. Features ‣ DOM manipulation ‣ DOM queries Slide 47TEQneers GmbH & Co. KG www.teqneers.de
    • 118. Features ‣ DOM manipulation ‣ DOM queries ‣ Animations Slide 47TEQneers GmbH & Co. KG www.teqneers.de
    • 119. Ext.dom.Helper var dh = Ext.DomHelper; // create shorthand alias var spec = { id: my-ul, tag: ul, cls: my-list, children: [ {tag: li, id: item0, html: List Item 0}, {tag: li, id: item1, html: List Item 1}, {tag: li, id: item2, html: List Item 2} ] }; var list = dh.append( Ext.getBody(), spec ); dh.append(list, [ {tag: li, id: item3, html: List Item 3}, {tag: li, id: item4, html: List Item 4} ]); Slide 48TEQneers GmbH & Co. KG www.teqneers.de
    • 120. Ext.dom.Helper - Templating var html = <a id="{id}" href="{url}" class="nav">{text}</a>; var tpl = Ext.DomHelper.createTemplate(html); tpl.append(Ext.getBody(), { id: link1, url: http://www.edspencer.net/, text: "Eds Site" }); tpl.append(Ext.getBody(), { id: link2, url: http://www.dustindiaz.com/, text: "Dustins Site" }); Slide 49TEQneers GmbH & Co. KG www.teqneers.de
    • 121. Ext.dom.Query ‣ provides selector and XPath processing ‣ extendable with custom pseudo classes and matchers ‣ works on HTML and XML ‣ supports most of the CSS3 selectors spec and basic XPath Slide 50TEQneers GmbH & Co. KG www.teqneers.de
    • 122. Animations var myComponent = Ext.create(Ext.Component, { renderTo: document.body, width: 200, height: 200, style: border: 1px solid red; }); Ext.create(Ext.fx.Anim, { target: myComponent, duration: 1000, from: { width: 400 }, to: { width: 300, height: 300 } }); Slide 51TEQneers GmbH & Co. KG www.teqneers.de
    • 123. Keyframes Ext.create(Ext.fx.Animator, { target: Ext.getBody().createChild({ style: { width: 100px, height: 100px, background-color: red } }), duration: 10000, // 10 seconds keyframes: { 0: { opacity: 1, backgroundColor: FF0000 }, 20: { x: 30, opacity: 0.5 }, 40: { x: 130, backgroundColor: 0000FF }, 60: { y: 80, opacity: 0.3 }, 80: { width: 200, y: 200 }, 100: { opacity: 1, backgroundColor: 00FF00 } } }); Slide 52TEQneers GmbH & Co. KG www.teqneers.de
    • 124. What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Miscellaneous Theming Slide 53TEQneers GmbH & Co. KG www.teqneers.de
    • 125. Utilities Slide 54TEQneers GmbH & Co. KG www.teqneers.de
    • 126. Tools ‣ Ext.Array ‣ Ext.util.TextMetrics ‣ Ext.Number ‣ Collections ‣ Ext.Object ‣ HashMaps ‣ Ext.String ‣ Events & Tasks ‣ Ext.JSON ‣ Ext.Date ‣ Ext.Function ‣ Ext.util.Format Slide 55TEQneers GmbH & Co. KG www.teqneers.de
    • 127. Templating Slide 56TEQneers GmbH & Co. KG www.teqneers.de
    • 128. Templatingvar order!= ...,! template = new Ext.XTemplate(<table class="order">,! <tbody>,! <tpl for=".">,! ! <tpl for="OrderDetails">,! ! ! <tr class="{[xindex % 2 === 0 ? "even" : "odd"]}">,! ! ! ! <tpl if="xindex == 1">,! ! ! ! ! <th rowspan="{[xcount]}">{parent.Order.Id}</th>,! ! ! ! </tpl>,! ! ! ! <td>{#}.</td>,! ! ! ! <td>Product ID <b>{ProductId}</b></td>,! ! ! ! <td><tpl if="UnitPrice &gt; 15"><u>{UnitPrice:usMoney}</u></tpl><tplif="UnitPrice &lt;= 15">{UnitPrice:usMoney}</tpl></td>,! ! ! ! <td>{Quantity * 0.5}</td>,! ! ! </tpl>,! ! </tr>,! </tpl>,! </tbody>, </table>);// apply the CustomerOrders array to the templatetemplate.append(content, order.CustomerOrders); Slide 57TEQneers GmbH & Co. KG www.teqneers.de
    • 129. Example Slide 58TEQneers GmbH & Co. KG www.teqneers.de
    • 130. AJAX Slide 59TEQneers GmbH & Co. KG www.teqneers.de
    • 131. Simple XMLHttpRequest Ext.Ajax.request({ url: some_page.php, success: function(response, opts) { var obj = Ext.decode(response.responseText); console.log(obj); }, failure: function(response, opts) { console.log(server-side failure with status code + response.status); } }); Slide 60TEQneers GmbH & Co. KG www.teqneers.de
    • 132. Can even fake file uploads... Ext.Ajax.request({ url: upload.php, ! form: id_of_a_form_with_an_upload_element, ! isUpload: true, success: function(response, opts) { var obj = Ext.decode(response.responseText); console.dir(obj); }, failure: function(response, opts) { console.log(server-side failure with status code + response.status); } }); Slide 61TEQneers GmbH & Co. KG www.teqneers.de
    • 133. Keyboard Navgation Slide 62TEQneers GmbH & Co. KG www.teqneers.de
    • 134. Drag and Drop Slide 63TEQneers GmbH & Co. KG www.teqneers.de
    • 135. Drawing Slide 64TEQneers GmbH & Co. KG www.teqneers.de
    • 136. Drawing ‣ renders either ‣ SVG ‣ VML (IE < 9) Slide 65TEQneers GmbH & Co. KG www.teqneers.de
    • 137. Examples Slide 66TEQneers GmbH & Co. KG www.teqneers.de
    • 138. Charting Slide 67TEQneers GmbH & Co. KG www.teqneers.de
    • 139. Charting Slide 68TEQneers GmbH & Co. KG www.teqneers.de
    • 140. Charting ‣ relatively simple charting solution out of the box ‣ but: lacks a lot of features when compared to professional enterprise-grade solutions such as Highcharts JS for example Slide 69TEQneers GmbH & Co. KG www.teqneers.de
    • 141. Example Slide 70TEQneers GmbH & Co. KG www.teqneers.de
    • 142. What is Ext JS? Widgets Layouts Data Package Class System DOM Manipulation Miscellaneous Theming Slide 71TEQneers GmbH & Co. KG www.teqneers.de
    • 143. Theming ‣ uses SASS and Compass as CSS pre-processor ‣ component UIs allow for easy extension / styling@include extjs-panel-ui( Ext.create(widget.panel, { bubble, ui: bubble, width: 300, $ui-header-font-size: 12px, height: 300, $ui-header-font-weight: bold, title: Panel with a bubble UI! $ui-header-color: #0D2A59, }); $ui-header-background-color: #fff, $ui-header-background-gradient: null, $ui-border-color: #fff, $ui-border-radius: 4px, $ui-body-background-color: #fff, $ui-body-font-size: 14px); Slide 72TEQneers GmbH & Co. KG www.teqneers.de
    • 144. Questions? Slide 73TEQneers GmbH & Co. KG www.teqneers.de
    • 145. Thank you, come again! Slide 74TEQneers GmbH & Co. KG www.teqneers.de
    • 146. Links ‣ http://www.sencha.com/ ‣ http://www.sencha.com/products/extjs/ ‣ http://docs.sencha.com/ext-js/4-1/ ‣ Ext JS 4.1 ‣ http://www.sencha.com/blog/first-thoughts-on-ext-js/ ‣ http://www.sencha.com/blog/optimizing-ext-js-4-1-based-applications/ ‣ Class System ‣ http://www.sencha.com/learn/sencha-class-system/ ‣ http://www.sencha.com/blog/countdown-to-ext-js-4-dynamic-loading-and-new-class-system ‣ http://edspencer.net/2011/01/classes-in-ext-js-4-under-the-hood.html ‣ http://edspencer.net/2011/01/ext-js-4-the-class-definition-pipeline.html ‣ Data Package ‣ http://www.sencha.com/blog/countdown-to-ext-js-4-data-package/ ‣ http://www.sencha.com/blog/ext-js-4-anatomy-of-a-model/ ‣ http://edspencer.net/2011/02/proxies-extjs-4.html ‣ Templating ‣ http://sgehrig.github.com/Ext-Templating-Examples/ Slide 75TEQneers GmbH & Co. KG www.teqneers.de

    ×