Introduction: What is ExtJS?

• ExtJS is a pure JavaScript application framework for building rich interactive web applications using techniques such as Ajax, DHTML and DOM scripting (due to wiki)

• ExtJS is JavaScript Framework for Rich Apps in Every Browser (due to ExtJS creators)

ExtJS history: Extension of YUI YUI 2006

 Yahoo! User Interface 

Jack Slocum made nice grid using YUI library

ExtJS history: Extension of YUI

Many other developers used his code extending it adding their own custom

componentsThese extensions were organized into an independent

library distributed under the name "yui-ext."

ExtJS history: Extension of YUI

ExtJS 1.0Separate add-on library for building user

interfaces for web applications using jQuery, Prototype or YUI

April 1, 2007 ExtJS 1.0

ExtJS: Independent framework

stand-alone version of ExtAugust 1, 2007 ExtJS 1.1

Goal: make complete GUI components library

ExtJS 4.0: MVC architecture

• ExtJS 4.0 native MVC Frameworko (Model-View-Controller)o Unlike JQuery and other major JS library providers

• By using MVC on the client side:o We only need to contact the server when using

CRUD operations

 April 26, 2011 ExtJS 4.0

Sencha

Ext JS + jQTouch + Raphaël = Sencha

June 15, 2010 Sencha

Sencha – the name of a popular Japanese green tea(in the tradition of Java – name of coffee)

Sencha Touch 2

Sencha Touch (Android, iOS, Blackberry 6 coming)http://sencha.com/products/touch/

March 7, 2012 Sencha Touch2

With over 50 built-in components, state management, and a built-in MVC system, Sencha Touch 2 provides everything you need to create immersive mobile apps.

Customized Desktop Sample

http://www.julfysoft.16mb.com/index.html

Matches application on iPad

Matches application on Android

Matches application on iPhone

OOP approach(both ExtJS and ST)

• Constructor call Ext.create(‘classname”, jsonconfig)• Class Ext.define(‘classname’, jsonconfig);

o Constructor constructor : function (config)o Inheritance extend: ‘ancestor.classname’o Dependence required: [‘array of classnames’]o Static fields and methods statics : jsonconfigo Multiple inheritance mixins: [‘array of classnames’]o Altering existing classes

Ext.override(‘classname”, jsonconfig)

Lazy initialization• Alias

    Ext.define(‘MyWidget', {        alias : 'widget.myalias',        extend : 'Ext.form.Panel',

• xtype

var win=Ext.create('Ext.window.Window’, … items: [{xtype: 'myalias', ...}],instead of items: [Ext.create('MyWidget', ...)

Questions?