Your SlideShare is downloading. ×
Ext oo
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Ext oo

952
views

Published on

ext js 介绍

ext js 介绍

Published in: Technology, Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
952
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 !