Kickstart sencha extjs
-
Upload
shakti-shrestha -
Category
Technology
-
view
247 -
download
4
description
Transcript of Kickstart sencha extjs
KICKSTART EXTJSSHAKTI SHRESTHA
ABOUT ME
I work at Miracle Interface as Chief Technical Officer (CTO).Software ArchitectFocus on delivering applications with good
performance
ABOUT ME
A certified OCP in oracle 10g.a Programmer by heart.Also involved with ASPNETCOMMUNITY
AGENDAS
What’s trending in javascript?What is Ext JS Why & When Ext JS?Ext JS : Let’s Kick & StartDemo
What’s trending in javscript?
What’s trending
Single Page applicationSingle Page Applications (SPA) are built on
expanding reach via the browser, reducing round tripping, and enhancing User Experience (UX).
Eg. gmail.com, facebook.com
What’s trending
Decouple data from UI or view(DOM)Code ManagementCallback Management (Events)
Data & UI can be updated. Action & application status
What’s trending….
Object Oriented ProgrammingAbstraction
abstraction is the process of separating ideas from specific instances of those ideas at work. Wikipedia
InheritanceEncapsulation
What’s trending….
Model View ControllerModel/CollectionViews/TemplatesController/Router
LIBRARIES & FRAMEWORKS…
JS frameworks/librariesBackboneJs AngularJsCanJsEmberJsMeteorJsExtJs
What is Ext JS?
ABOUT EXT JS
JavaScript frameworkIts MVC structureExtjs 5.x also includes MVVM feature
Two way binding support
It has very rich set of UI componets.
ABOUT EXT JS
Developed & Maintained by senchahttp://www.sencha.com/
LicenseCommercialGPL (Only for open source projects)
ABOUT EXT JS
Download locationhttp://www.sencha.com/products/extjs/details
EXTJS FEATURES
Support for HTML 5 Object-Oriented flavorRich UI controlsMVC architectureAwesome DocumentationMoving to the mobile version
FEATURES…
Why & When Ext JS?
WHY & WHEN EXT JS?
It includes a comprehensive library of JavaScript-based classesUI componentsUI layoutsCollectionsNetworkingPackaging tool (JS & CSS Compiler)and more..
WHY & WHEN EXT JS?
Cross browser supportSafari 6+,Firefox,IE 8+,Chrome,Opera 12+,Safari /
iOS 6+,Chrome / Android 4.1+,IE 10+ / Win 8Ext JS 4.x supports (ie6+)
Ext JS 5.x supports (ie8+)
WHY & WHEN EXT JS?
Powerful build commandSencha command
http://www.sencha.com/products/sencha-cmd/
Packaging(Single application or break into multiple)
CSS minimize
WHY & WHEN EXT JS?
TemplatingCan be used when UI components are not
able to fulfill your demand.
Provides initial code layer to jump start MVC application
WHY & WHEN EXT JS?
HTML5 framework but doesn’t require you to write HTML. The index file just includes
Ext JS framework link (JS & CSS)CSS fileapp.js (the code that starts the user-application)
WHY & WHEN EXT JS?
Ext JS offers a way to write object-oriented codeDefine classesInheritance in a way that’s closer to classical
inheritanceDoesn’t require the prototype property
Best for enterprise applications
WHY & WHEN EXT JS?
AccessibilityExt JS 5.0.1 makes it possible to create highly accessible
JavaScript applications by providing the tools that developers need to achieve Section 508 and ARIA compliance
About accessibilityThose with disabilities, especially the visually impairedThose who rely on assistive technologies, such as screen readers,
to use a computerThose who cannot use a mouse to navigate an application
Ext JS : Let’s Kick & Start
HELLO WORLD!!
Lets create first app in ExtjsReferences the JavaScript and CSS files from our CDN as shown below:
Reference to script that start the application
HELLO WORLD!!
HELLO WORLD!!
COMPONENTS
The Component Hierarchy
COMPONETS
Define childs
Parents & adding childs
DATA PACKAGE
The data package is what loads and saves all of the data in your application. It consists of a multitude of classes, but there are three that are more important than all the others.Ext.data.ModelStoreExt.data.proxy.Proxy
DATA PACKAGE
LAYOUTS AND CONTAINERS
The layout system is one of the most powerful parts of Ext JS.
It handles the sizing and positioning of every Component in your application.
LAYOUTS AND CONTAINERS
MORE…
Localization in Ext JSMemory ManagementRight-to-Left Support in Ext JSTablet and Touch-Screen Support in Ext JS 5Theming Ext JS
MORE…
Draw PackageEventsDrag and DropSencha cmdTemplates
MORE…
MVCMVVM
Demo
Some Important links
http://www.sencha.comhttp://docs.sencha.com/extjs/5.0/index.htmlhttp://docs.sencha.com/extjs/4.2.1/http://forum.sencha.com/
Questions
Thank you.
THANK YOU