PPT - Tech Connect on 23rd May,2014

1. (An overview of the ExtJSJavaScript Framework)

2. 2© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Introduction to ExtJS
ExtJS is a java-script framework (client-side) that enables developers to develop Rich Internet
Applications (RIA) (static websites or data-driven applications) with a large number of options.
ExtJS has a huge collection of controls (ranging from textboxes to highly sophisticated UI Controls)
along with a brilliant demo + examples.
Points to Remember
• Since ExtJS is a java-script framework, all of the java script rules are applicable for ExtJS.
• ExtJS makes excellent & extensive use on DOM, CSS etc.
• ExtJS is case-sensitive, i.e., a != A
• ExtJS is “Asynchronous” by default.

3. 3© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
WHY EXT JS ?
• This is really what matters (MVC)
o Easy Client-side data modeling
 Relational Models
o Simple to use GUI widgets
Client Side JS With ExtJS
• MVC for JavaScript
• Exactly same process for server side stack, except we now try to use the server as little as possible
o This allows for powerful client machines to do most of our processing and rendering
o Only allow the client to manipulate data that can be considered hostile!

4. 4© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Cross Browser

5. 5© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
ExtJS View
• Since this is JavaScript, we immediately expect robust GUI widgets
• Of course, you can add CSS and style them

6. 6© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
ExtJS Control
• This allows for very JavaScript is a functional language
• strong and very easy control logic

7. 7© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Good Documentation

8. 8© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Data Grid
•Sort
•Columns
•Editable
•Data source
•Filter

9. 9© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Charts

10. 10© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Calendars

11. 11© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Example Of Creating Tabs

12. 12© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
What Else Extjs Can Do?
• Ajax support
• Dom traversing
• Dom manipulation
• Event Handling
• Selectors
• OOP emulation
• Animation

13. 13© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Component
• All widgets extends component class
• Provide base widget functions like
o enable()/disable()
o show()/hide()
o addClass()/removeClass()
o update(data/html) – update content area
o getEl() return element
o getId()
o getXType()
o render(target)
o focus()
• XType – alternate way to define component
o Lazy component creation
• var panel1 = {
• xtype : 'panel',
• title : 'Plain Panel',
• html : 'Panel with an xtype specified'
• }
• var myPanel = new Ext.Panel({
• renderTo : document.body,
• height : 50,
• width : 150,
• title : 'Panel',
• frame : true
• Components are managed by Ext.ComponentMgr
o get(componentId)
o registerType(xtype, object) (shorthand Ext.reg())

14. 14© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Container
• Handle the basic behavior of containing items, namely
adding, inserting and removing items
• Main functions
o add()
o remove()/removeAll()
o insert()
o find()/findBy()/findById()/findByType
o doLayout()
o get(index or id)/getComponent(component or index or id)
• Main prop
o Items - MixedCollection of children components

15. 15© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Panels
• Main panel functions/prop/conf prop
o load()
o body – prop
o html – conf prop
o autoLoad – conf prop
• Toolbar and Bottombar
• Panel subclasses
o TabPanel
o Window
o FormPanel
o GridPanel
o TreePanel

16. 16© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Layout
• Layouts manages by containers – there is no
need to create Layouts directly
• The most useful are Fit, VBox, HBox, Border
o Only VBox, HBox, Border layouts supports margins
• Flex prop of VBox, HBox
• BorderLayout must have center item
• Table layout does not support resizing of items

17. 17© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
What We Did?

18. 18© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL

19. 19© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL

20. 20© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL

21. 21© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL

22. 22© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL

23. 23© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
REFERENCES AND LINKS:
• Main Website
http://www.sencha.com/
• EXT JS Download
http://www.sencha.com/products/extjs/download/
• EXT JS API Documentation
http://dev.sencha.com/deploy/dev/docs/
• EXT JS Samples
http://dev.sencha.com/deploy/dev/examples/

24. 24© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Thank You!