Your SlideShare is downloading. ×
0
Introduction: What is ExtJS?• ExtJS is a pure JavaScript application framework for  building rich interactive web applicat...
ExtJS history: Extension of YUI                                YUI 2006                           Yahoo! User Interface Ja...
ExtJS history: Extension of YUIMany other developers used his code extending    it adding their own custom componentsThese...
ExtJS history: Extension of YUI                         April 1, 2007 ExtJS 1.0                  ExtJS 1.0  Separate add-o...
ExtJS: Independent framework                     August 1, 2007 ExtJS 1.1                     stand-alone version of ExtGo...
ExtJS 4.0: MVC architecture                         April 26, 2011 ExtJS 4.0• ExtJS 4.0 native MVC Framework  o (Model-Vie...
Sencha                           June 15, 2010 SenchaSencha – the name of a popular Japanese green tea(in the tradition of...
Sencha Touch 2                      March 7, 2012 Sencha Touch2With over 50 built-in components, state management,and a bu...
Customized Desktop Samplehttp://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’, jsonc...
Lazy initialization                  • Alias                        Ext.define(‘MyWidget, {                            ali...
Questions?
Upcoming SlideShare
Loading in...5
×

ExtJS Sencha Touch

1,308

Published on

ExtJS Sencha Touch

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,308
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "ExtJS Sencha Touch"

  1. 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. 2. ExtJS history: Extension of YUI YUI 2006  Yahoo! User Interface Jack Slocum made nice grid using YUI library
  3. 3. ExtJS history: Extension of YUIMany 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."
  4. 4. ExtJS history: Extension of YUI April 1, 2007 ExtJS 1.0 ExtJS 1.0 Separate add-on library for building userinterfaces for web applications using jQuery, Prototype or YUI
  5. 5. ExtJS: Independent framework August 1, 2007 ExtJS 1.1 stand-alone version of ExtGoal: make complete GUI components library
  6. 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. 7. Sencha June 15, 2010 SenchaSencha – the name of a popular Japanese green tea(in the tradition of Java – name of coffee) Ext JS + jQTouch + Raphaël = Sencha
  8. 8. Sencha Touch 2 March 7, 2012 Sencha Touch2With over 50 built-in components, state management,and a built-in MVC system, Sencha Touch 2 provideseverything you need to create immersive mobile apps.Sencha Touch (Android, iOS, Blackberry 6 coming)http://sencha.com/products/touch/
  9. 9. Customized Desktop Samplehttp://www.julfysoft.16mb.com/index.html
  10. 10. Matches application on iPad
  11. 11. Matches application on Android
  12. 12. Matches application on iPhone
  13. 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. 14. Lazy initialization • Alias     Ext.define(‘MyWidget, {         alias : widget.myalias,         extend : Ext.form.Panel, • xtypevar win=Ext.create(Ext.window.Window’, … items: [{xtype: myalias, ...}],instead of items: [Ext.create(MyWidget, ...)
  15. 15. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×