ExtJS Sencha Touch

1,466 views
1,398 views

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,466
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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?

×