Upload
pavanprofiles42
View
256
Download
0
Embed Size (px)
Citation preview
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 1/28
Power Of ExtJs By Kartikeya Madeshia
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 2/28
What is ExtJs
● ExtJS is a javascript framework (client-side)that enables developers to develop RichInternet Application (RIA) (static websites or
data-driven applications) with a plethora of options.
● ExtJS has a huge collection of controls (rangingfrom textboxes to highly sophisticated UI
Controls).
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 3/28
ExtJs History
● Started as extension to Yahoo's YUI!Framework in 2006 – YUI-Ext !
● By the end of the year, the library had gained so
much in popularity that the name was changedsimply to Ext, a reflection of its maturity andindependence as a framework.
● A company was formed in early 2007, and Extis now dual-licensed under the GPL v3 and aproprietary license.
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 4/28
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 5/28
Why ExtJs ?
● Most Developers don't like to design
● HTML isn’t pretty
● HTML isn’t functional● ExtJs is the largest consistent library of
extended components in a single package
● ExtJs is “baked in” to ColdFusion
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 6/28
Features of ExtJs
● Ext is cross-browser compatible.
● Ext has a complete set of widgets.
●
Ext looks great and it feels good.● Ext is very well documented.
● Ext can be used both under a free and a
commercial license.
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 7/28
Cross Browser
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 8/28
Windows looks like OS windows – supportdragging/resizing/closing
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 9/28
Good Documentation
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 10/28
How do we begin?
● Download the latest copy of ExtJS fromhttp://www.sencha.com/products/extjs/download/
● Unzip using any file compression utility
(Winzip / WinRAR).● It is strongly recommended that you create a
virtual directory for the unzipped folder (sincecertain examples work only if accessed via
website / virtual directory).
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 11/28
Walking the first step…
● Add the ExtJS folder (ext-3.4.0) within theproject folder.
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 12/28
Files to be linked
● Add links to all thehighlighted files. Thesefiles are very muchimportant to set-up theground work for our
application.
● Next add your custom files.
● Example (in index.cfm):● <link rel="stylesheet" type="text/css" href="ext-
3.4.0/resources/css/ext-all.css" />
● <script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
● <script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
● <script type="text/javascript"
src="js/global.js"></script>
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 13/28
Explaining the files to be linked ..
● ext-base.js: This file is the driving engineof Ext. This file is very important & cannotbe skipped.
● ext-all.js: This file contains all the definedUI elements (like textbox, combo, button,grid etc…).
● ext-all.css: Responsible for the defaultblue theme of ExtJS.
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 14/28
What Do We Know?
• Data In Most applications require some form of data
entry
• Data Out Most applications require us to display that data
in an easy and logical format
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 15/28
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 16/28
Data Out
● Rich component architecture
● Tools to create new and inventive
displays
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 17/28
Layout Controls
● Layouts
● Tabs
● Accordians
● Windows
● Panels
●
Message Boxes● Templates
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 18/28
Sample Layouts
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 19/28
Sample Containers
● Most all common paradigms
Windows, Panels, Tabs, Accordion
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 20/28
Message Boxes
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 21/28
Data Views
• Grids – Basic
– Editable
– Property
– Paging
– Grouping
• Forms
• Charts
• Trees
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 22/28
Sample Grid
● Feature rich grid class
- Sorting
- Column hiding
- In-cell editing
- Customer rendering / formatting
- Plug-ins (grouping, summaries, expands)
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 23/28
Sample Grid (cont..)
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 24/28
Sample forms
● Rich forms support
-Excellent validation support
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 25/28
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 26/28
Data
• Readers – Local or Remote Data
• JavaScript Array
• JSON
• XML
• Writers (to server)– JSON
– XML
• StoresLocal storage of records, with built in facility for client-side manipulation and
server-side communication
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 27/28
Pizzazz
● Ajax
● Effects
●
Drag & Drop● History
● Utilities
8/2/2019 A Presentation on ExtJS
http://slidepdf.com/reader/full/a-presentation-on-extjs 28/28
Thank You..
Questions..