This document discusses ExtJS classes and design patterns including: 1. Using Ext.apply, Ext.applyIf, and Ext.extend to modify and extend classes and objects. 2. The Observer design pattern and how ExtJS classes can inherit from Ext.util.Observable to expose events. 3. How to add and remove event handlers to listen for events in ExtJS.

1. Ext OO tiwtter : @o52tiger_china sina : @o52tiger

2. 1 3 ExtJS Classes Ext.apply Ext.applyIf Ext.extend Event & Observer Design Pattern 2

3. ExtJS classes constructor function & new keyword Person Class: var Person = function(config) { Ext.apply(this, config); }; Using the Person class: var me = new Person({ fName: ‘Aaron’, lName: ‘Conran’, dob: ’03/23/1984’ });

4. Ext.apply Ext.applyIf Ext.extend Ext.apply Ex: Ext.apply(this, config); // with defaults var defConfig = {test: ‘abc’}; Ext.apply(this, config, defConfig);

5. Ext.applyIf Ex: var point = point || {}; var default = {x: 0, y: 0}; Ext.applyIf(point, default);

6. Ext.extend Generic Pattern: var SubClass = function() { SubClass.superclass.constructor.call(this); }; Ext.extend(SubClass, BaseClass, { newMethod : function() {}, overriddenMethod : function() {} };

7. superclass.constructor Ex: BaseClass.superclass.constructor.call(this, config);

8. Extending an Ext Class Goal : create a extension of Ext.Panel

9. Rs.ext.query.QueryPanel = function(config){ Rs.ext.query.QueryPanel.superclass.constructor.call(this, Ext.apply({ bbar : ….. }, config || {})) } Ext.extend(Rs.ext.query.QueryPanel, Ext.Panel, { initComponent : function(){ //TODO: override initComponent } })

10. var qp = new Rs.ext.query.QueryPanel({ //config });

11. Event Events describe when a certain action happens. This could be a user action, a response to an Ajax call, etc. Events also provide us with some information about what occurred via arguments

12. To add an event handler to an event we use the following syntax. Ext.fly(‘myElement’).on(‘click’, myFunction, scope); To remove an event handler to an event we use the following syntax. Ext.fly(‘myElement’).un(‘click’, myFunction, scope);

13. All classes which expose events inherit from Ext.util.Observable. Rs.ext.state.Provider = function(config){ //do something… } Ext.extend(Rs.ext.state.Provider, Ext.util.Observable,{ //override and add some methods });

14. before events ds.on(‘beforeload’, function(ds, opts) {return false;});

15. Observer Design Pattern An observable object can notify any number of observers who would like to know when an event happens and what happened.

16. Ext.util.Observable Inherit from Ext.util.Observable Ex: var MyObservable = function () { MyObservable.superclass.constructor.call(this) this .addEvents({event1: true , event2: true }); }; Ext.extend(MyObservable, Ext.util.Observable);

17. Methods: addEvents addListener – shorthand of on fireEvent hasListener purgeListener removeListener – shorthand of un

18. By firing events an observable class can notify its observers that a particular event and provide them with relevant information by arguments. Ex: this.fireEvent(‘event1’, relevantInfo, moreInfo);

19. addListener( String eventName, Function handler, [Object scope], [Object options] ) delay single buffer Rs.ext.state.StateManager.getProvider().on( 'statechange', this.syncStateMangerMenu, this, {single:true, delay:10});

20. capture & releaseCapture Ext.util.Observable.capture(wr, function(e) { return false; //return true; }); Ext.util.Observable.releaseCapture(wr);

21. Thank You !