Upload
abhinav-goel
View
243
Download
0
Embed Size (px)
DESCRIPTION
PPT - Tech Connect on 23rd May,2014
Citation preview
(An overview of the ExtJSJavaScript Framework)
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© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
WHY EXT JS ?
• This is really what matters (MVC)o Easy Client-side data modeling
Relational Modelso 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 renderingo Only allow the client to manipulate data that can be considered hostile!
4© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Cross Browser
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© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
ExtJS Control
• This allows for very JavaScript is a functional language• strong and very easy control logic
7© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Good Documentation
8© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Data Grid•Sort
•Columns
•Editable
•Data source
•Filter
9© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Charts
10© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Calendars
11© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Example Of Creating Tabs
12© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
What Else Extjs Can Do?
• Ajax support• Dom traversing• Dom manipulation• Event Handling• Selectors• OOP emulation• Animation
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 areao getEl() return elemento getId()o getXType()o render(target)o focus()
• XType – alternate way to define componento 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.ComponentMgro get(componentId)o registerType(xtype, object) (shorthand Ext.reg())
14© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Container
• Handle the basic behavior of containing items, namely adding, inserting and removing items
• Main functionso add()o remove()/removeAll()o insert()o find()/findBy()/findById()/findByTypeo doLayout()o get(index or id)/getComponent(component or index or id)
• Main propo Items - MixedCollection of children components
15© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Panels
• Main panel functions/prop/conf propo load()o body – propo html – conf propo autoLoad – conf prop
• Toolbar and Bottombar• Panel subclasses
o TabPanelo Window o FormPanelo GridPanel o TreePanel
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, Bordero 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© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
What We Did?
18© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
19© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
20© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
21© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
22© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
23© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
REFERENCES AND LINKS:
• Main Websitehttp://www.sencha.com/
• EXT JS Downloadhttp://www.sencha.com/products/extjs/download/
• EXT JS API Documentation http://dev.sencha.com/deploy/dev/docs/
• EXT JS Sampleshttp://dev.sencha.com/deploy/dev/examples/
24© COPYRIGHT 2011 SAPIENT CORPORATION | CONFIDENTIAL
Thank You!