kickstart sencha extjs

KICKSTART EXTJSSHAKTI SHRESTHA

shakti.shrestha@gmail.com

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