ExtJS Sencha Touch

1. 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)

2. ExtJS history: Extension of YUI
YUI 2006
Yahoo! User Interface
Jack Slocum made nice grid using YUI library

3. ExtJS history: Extension of YUI
Many other developers used his code extending
it adding their own custom components
These extensions were organized into an independent
library distributed under the name "yui-ext."

4. ExtJS history: Extension of YUI
April 1, 2007 ExtJS 1.0
ExtJS 1.0
Separate add-on library for building user
interfaces for web applications using jQuery,
Prototype or YUI

5. ExtJS: Independent framework
August 1, 2007 ExtJS 1.1
stand-alone version of Ext
Goal: make complete GUI components library

6. ExtJS 4.0: MVC architecture
April 26, 2011 ExtJS 4.0
• ExtJS 4.0 native MVC Framework
o (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

7. Sencha
June 15, 2010 Sencha
Sencha – the name of a popular Japanese green tea
(in the tradition of Java – name of coffee)
Ext JS + jQTouch + Raphaël = Sencha

8. Sencha Touch 2
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.
Sencha Touch (Android, iOS, Blackberry 6 coming)
http://sencha.com/products/touch/

9. Customized Desktop Sample
http://www.julfysoft.16mb.com/index.html

10. Matches application on iPad

11. Matches application on Android

12. Matches application on iPhone

13. 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 : jsonconfig
o Multiple inheritance mixins: [‘array of classnames’]
o Altering existing classes
Ext.override(‘classname”, jsonconfig)

14. 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', ...)

15. Questions?