Kickstart sencha extjs

41
KICKSTART EXTJS SHAKTI SHRESTHA [email protected]

description

Slides on how to start development using extjs

Transcript of Kickstart sencha extjs

Page 1: Kickstart sencha extjs

KICKSTART EXTJSSHAKTI SHRESTHA

[email protected]

Page 2: Kickstart sencha extjs

ABOUT ME

I work at Miracle Interface as Chief Technical Officer (CTO).Software ArchitectFocus on delivering applications with good

performance

Page 3: Kickstart sencha extjs

ABOUT ME

A certified OCP in oracle 10g.a Programmer by heart.Also involved with ASPNETCOMMUNITY

Page 4: Kickstart sencha extjs

AGENDAS

What’s trending in javascript?What is Ext JS Why & When Ext JS?Ext JS : Let’s Kick & StartDemo

Page 5: Kickstart sencha extjs

What’s trending in javscript?

Page 6: Kickstart sencha extjs

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

Page 7: Kickstart sencha extjs

What’s trending

Decouple data from UI or view(DOM)Code ManagementCallback Management (Events)

Data & UI can be updated. Action & application status

Page 8: Kickstart sencha extjs

What’s trending….

Object Oriented ProgrammingAbstraction

abstraction is the process of separating ideas from specific instances of those ideas at work. Wikipedia

InheritanceEncapsulation

Page 9: Kickstart sencha extjs

What’s trending….

Model View ControllerModel/CollectionViews/TemplatesController/Router

Page 10: Kickstart sencha extjs

LIBRARIES & FRAMEWORKS…

JS frameworks/librariesBackboneJs AngularJsCanJsEmberJsMeteorJsExtJs

Page 11: Kickstart sencha extjs

What is Ext JS?

Page 12: Kickstart sencha extjs

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.

Page 13: Kickstart sencha extjs

ABOUT EXT JS

Developed & Maintained by senchahttp://www.sencha.com/

LicenseCommercialGPL (Only for open source projects)

Page 14: Kickstart sencha extjs

ABOUT EXT JS

Download locationhttp://www.sencha.com/products/extjs/details

Page 15: Kickstart sencha extjs

EXTJS FEATURES

Support for HTML 5 Object-Oriented flavorRich UI controlsMVC architectureAwesome DocumentationMoving to the mobile version

Page 16: Kickstart sencha extjs

FEATURES…

Page 17: Kickstart sencha extjs

Why & When Ext JS?

Page 18: Kickstart sencha extjs

WHY & WHEN EXT JS?

It includes a comprehensive library of JavaScript-based classesUI componentsUI layoutsCollectionsNetworkingPackaging tool (JS & CSS Compiler)and more..

Page 19: Kickstart sencha extjs

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+)

Page 20: Kickstart sencha extjs

WHY & WHEN EXT JS?

Powerful build commandSencha command

http://www.sencha.com/products/sencha-cmd/

Packaging(Single application or break into multiple)

CSS minimize

Page 21: Kickstart sencha extjs

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

Page 22: Kickstart sencha extjs

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)

Page 23: Kickstart sencha extjs

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

Page 24: Kickstart sencha extjs

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

Page 25: Kickstart sencha extjs

Ext JS : Let’s Kick & Start

Page 26: Kickstart sencha extjs

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

Page 27: Kickstart sencha extjs

HELLO WORLD!!

Page 28: Kickstart sencha extjs

HELLO WORLD!!

Page 29: Kickstart sencha extjs

COMPONENTS

The Component Hierarchy

Page 30: Kickstart sencha extjs

COMPONETS

Define childs

Parents & adding childs

Page 31: Kickstart sencha extjs

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

Page 32: Kickstart sencha extjs

DATA PACKAGE

Page 33: Kickstart sencha extjs

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.

Page 34: Kickstart sencha extjs

LAYOUTS AND CONTAINERS

Page 35: Kickstart sencha extjs

MORE…

Localization in Ext JSMemory ManagementRight-to-Left Support in Ext JSTablet and Touch-Screen Support in Ext JS 5Theming Ext JS

Page 36: Kickstart sencha extjs

MORE…

Draw PackageEventsDrag and DropSencha cmdTemplates

Page 37: Kickstart sencha extjs

MORE…

MVCMVVM

Page 38: Kickstart sencha extjs

Demo

Page 39: Kickstart sencha extjs

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/

Page 40: Kickstart sencha extjs

Questions

Page 41: Kickstart sencha extjs

Thank you.

THANK YOU