a presentation on extjs by kartikeya
Post on 27-Oct-2014
37 Views
Preview:
TRANSCRIPT
Power Of ExtJs By Kartikeya Madeshia
What is ExtJs● ExtJS is a javascript framework (client-side)
that enables developers to develop Rich Internet Application (RIA) (static websites or data-driven applications) with a plethora of options.
● ExtJS has a huge collection of controls (ranging from textboxes to highly sophisticated UI Controls).
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 changed simply to Ext, a reflection of its maturity and independence as a framework.
● A company was formed in early 2007, and Ext is now dual-licensed under the GPL v3 and a proprietary license.
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
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.
Cross Browser
Windows looks like OS windows – support dragging/resizing/closing
Good Documentation
How do we begin?● Download the latest copy of ExtJS from
http://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 (since certain examples work only if accessed via website / virtual directory).
Walking the first step…● Add the ExtJS folder
(ext-3.4.0) within the project folder.
Files to be linked● Add links to all the
highlighted files. These files are very much important to set-up the ground 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>
Explaining the files to be linked ..
● ext-base.js: This file is the driving engine of Ext. This file is very important & cannot be skipped.
● ext-all.js: This file contains all the defined UI elements (like textbox, combo, button, grid etc…).
● ext-all.css: Responsible for the default blue theme of ExtJS.
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
Data In• Create rich dynamic form interfaces for taking in data.• Apply client-side validation process and logic.
Data Out● Rich component architecture● Tools to create new and inventive
displays
Layout Controls● Layouts● Tabs● Accordians● Windows● Panels● Message Boxes● Templates
Sample Layouts
Sample Containers● Most all common paradigms
Windows, Panels, Tabs, Accordion
Message Boxes
Data Views
• Grids – Basic
– Editable
– Property
– Paging
– Grouping
• Forms• Charts• Trees
Sample Grid● Feature rich grid class
- Sorting- Column hiding- In-cell editing- Customer rendering / formatting- Plug-ins (grouping, summaries, expands)
Sample Grid (cont..)
Sample forms● Rich forms support
-Excellent validation support
Data
• Readers– Local or Remote Data
• JavaScript Array
• JSON
• XML
• Writers (to server) – JSON
– XML
• Stores Local storage of records, with built in facility for client-side manipulation and
server-side communication
Pizzazz● Ajax● Effects● Drag & Drop● History● Utilities
Thank You..
Questions..
top related