Ext oo

1,454 views

Published on

ext js 介绍

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

No Downloads
Views
Total views
1,454
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ext oo

  1. 1. Ext OO tiwtter : @o52tiger_china sina : @o52tiger
  2. 2. 1 3 ExtJS Classes Ext.apply Ext.applyIf Ext.extend Event & Observer Design Pattern 2
  3. 3. ExtJS classes <ul><li>constructor function & new keyword </li></ul><ul><li>Person Class: </li></ul><ul><li>var Person = function(config) { </li></ul><ul><ul><li>Ext.apply(this, config); </li></ul></ul><ul><li>}; </li></ul>Using the Person class: var me = new Person({ fName: ‘Aaron’, lName: ‘Conran’, dob: ’03/23/1984’ });
  4. 4. Ext.apply Ext.applyIf Ext.extend <ul><li>Ext.apply </li></ul><ul><li>Ex: </li></ul><ul><ul><li>Ext.apply(this, config); </li></ul></ul><ul><ul><li>// with defaults </li></ul></ul><ul><ul><li>var defConfig = {test: ‘abc’}; </li></ul></ul><ul><ul><li>Ext.apply(this, config, defConfig); </li></ul></ul>
  5. 5. <ul><li>Ext.applyIf </li></ul><ul><li>Ex: </li></ul><ul><ul><li>var point = point || {}; </li></ul></ul><ul><ul><li>var default = {x: 0, y: 0}; </li></ul></ul><ul><ul><li>Ext.applyIf(point, default); </li></ul></ul>
  6. 6. <ul><li>Ext.extend </li></ul><ul><li>Generic Pattern: </li></ul><ul><ul><li>var SubClass = function() { </li></ul></ul><ul><ul><li>SubClass.superclass.constructor.call(this); </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>Ext.extend(SubClass, BaseClass, { </li></ul></ul><ul><ul><li>newMethod : function() {}, </li></ul></ul><ul><ul><li>overriddenMethod : function() {} </li></ul></ul><ul><ul><li>}; </li></ul></ul>
  7. 7. <ul><li>superclass.constructor </li></ul>Ex: BaseClass.superclass.constructor.call(this, config);
  8. 8. Extending an Ext Class <ul><li>Goal : create a extension of Ext.Panel </li></ul>
  9. 9. <ul><li>Rs.ext.query.QueryPanel = function(config){ </li></ul><ul><li>Rs.ext.query.QueryPanel.superclass.constructor.call(this, Ext.apply({ </li></ul><ul><li>bbar : ….. </li></ul><ul><li>}, config || {})) </li></ul><ul><li>} </li></ul><ul><li>Ext.extend(Rs.ext.query.QueryPanel, Ext.Panel, { </li></ul><ul><li>initComponent : function(){ </li></ul><ul><li>//TODO: override initComponent </li></ul><ul><li>} </li></ul><ul><li>}) </li></ul>
  10. 10. <ul><li>var qp = new Rs.ext.query.QueryPanel({ </li></ul><ul><li>//config </li></ul><ul><li>}); </li></ul>
  11. 11. Event <ul><li>Events describe when a certain action happens. This could be a user action, a response to an Ajax call, etc. </li></ul><ul><li>Events also provide us with some information about what occurred via arguments </li></ul>
  12. 12. <ul><li>To add an event handler to an event we use the following syntax. </li></ul><ul><li>Ext.fly(‘myElement’).on(‘click’, myFunction, scope); </li></ul><ul><li>To remove an event handler to an event we use the following syntax. </li></ul><ul><li>Ext.fly(‘myElement’).un(‘click’, myFunction, scope); </li></ul>
  13. 13. <ul><li>All classes which expose events inherit from Ext.util.Observable. </li></ul><ul><li>Rs.ext.state.Provider = function(config){ </li></ul><ul><li>//do something… </li></ul><ul><li>} </li></ul><ul><li>Ext.extend(Rs.ext.state.Provider, Ext.util.Observable,{ </li></ul><ul><li> //override and add some methods </li></ul><ul><li>}); </li></ul>
  14. 14. <ul><li>before events </li></ul><ul><ul><li>ds.on(‘beforeload’, function(ds, opts) {return false;}); </li></ul></ul>
  15. 15. Observer Design Pattern <ul><li>An observable object can notify any number of observers who would like to know when an event happens and what happened. </li></ul>
  16. 16. Ext.util.Observable <ul><li>Inherit from Ext.util.Observable </li></ul><ul><li>Ex: </li></ul><ul><ul><li>var MyObservable = function () { </li></ul></ul><ul><ul><li>MyObservable.superclass.constructor.call(this) </li></ul></ul><ul><ul><li>this .addEvents({event1: true , event2: true }); </li></ul></ul><ul><ul><li>}; </li></ul></ul><ul><ul><li>Ext.extend(MyObservable, Ext.util.Observable); </li></ul></ul>
  17. 17. <ul><li>Methods: </li></ul><ul><ul><li>addEvents </li></ul></ul><ul><ul><li>addListener – shorthand of on </li></ul></ul><ul><ul><li>fireEvent </li></ul></ul><ul><ul><li>hasListener </li></ul></ul><ul><ul><li>purgeListener </li></ul></ul><ul><ul><li>removeListener – shorthand of un </li></ul></ul>
  18. 18. <ul><li>By firing events an observable class can notify its observers that a particular event and provide them with relevant information by arguments. </li></ul><ul><li>Ex: </li></ul><ul><li>this.fireEvent(‘event1’, relevantInfo, moreInfo); </li></ul>
  19. 19. <ul><li>addListener( String eventName, Function handler, [Object scope], [Object options] ) </li></ul><ul><ul><li>delay single buffer </li></ul></ul><ul><li>Rs.ext.state.StateManager.getProvider().on( </li></ul><ul><li>'statechange', </li></ul><ul><li>this.syncStateMangerMenu, this, </li></ul><ul><li>{single:true, delay:10}); </li></ul>
  20. 20. <ul><li>capture & releaseCapture </li></ul><ul><ul><li>Ext.util.Observable.capture(wr, function(e) { </li></ul></ul><ul><ul><li>return false; </li></ul></ul><ul><ul><li>//return true; </li></ul></ul><ul><ul><li>}); </li></ul></ul><ul><ul><li>Ext.util.Observable.releaseCapture(wr); </li></ul></ul>
  21. 21. Thank You !

×