Hybrid View

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    13
    Vote Rating
    0
    jonsykes is on a distinguished road

      0  

    Default Answered: Anonymous Topic Style Pub/Sub system?

    Answered: Anonymous Topic Style Pub/Sub system?


    Been poking around the code base, but I don't see anything obvious that fills this need.

    Does 4.x not have an anonymous pub/sub system in place?

    Something akin to dojo's publish/subscribe functionality

    http://davidwalsh.name/dojo-pub-sub

  2. It doesn't, but I whipped up a simple mechanism you could extend to your liking:

    Code:
    // Define
    
    
    Ext.define('PubSub', {
      extend: 'Ext.util.Observable',
    
    
      statics: {
        instance: null,
    
    
        subscribe: function (topic, listener, scope) {
          // Route messages through instance
          if (!PubSub.instance) {
            PubSub.instance = new this();
          }
    
    
          var inst = PubSub.instance;
    
    
          // Ensure that event is declared
          if (!inst.events[topic]) {
            inst.addEvents(topic);
          }
    
    
          // Then listen on it, with declared scope
          inst.mon(inst, topic, listener, scope || inst);
        },
    
    
        publish: function () {
          var inst = PubSub.instance;
          var args = Ext.Array.toArray(arguments);
          var topic = args[0];
    
    
          // If the topic has been declared through subscribe
          if (inst && topic && inst.events[topic]) {
            // A quirk in Observable requires me to lowercase the topic name
            // I could have used inst.fireEvent(topic, args.slice(1))
            // but the listener would get the args as a single array 
            // parameter in arguments[0].
            // This allows the published arguments to be passed properly.
           
            var evt = inst.events[topic.toLowerCase()];
            evt.fire.apply(evt, args.slice(1));
          }
        }
      }
    });
    
    
    // Subscribe
    
    
    PubSub.subscribe('testTopic', function (a, b) {
      alert(a + ' = ' + b);
    }, this);
    
    
    PubSub.subscribe('testTopic', function (a, b) {
      alert(a + ' != ' + b);
    }, this);
    
    
    // Publish
    
    
    PubSub.publish('testTopic', 'x', 5);
    Note - this is rudimentary - it doesn't have topic management (remove listeners and event declarations), but that could be added.

    hope this helps,

    stevil

  3. #2
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,188
    Answers
    7
    Vote Rating
    102
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      0  

    Default


    You should be able to port to Ext this jQuery pub/sub plugin based on Dojo:

    https://github.com/phiggins42/bloody...ster/pubsub.js

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    13
    Vote Rating
    0
    jonsykes is on a distinguished road

      0  

    Default


    Yeah, I'm actually doing that right now, hanging it off observable.

    I was just surprised there was nothing baked in. There are 3 or 4 plugins and extensions that look great from 3 or 4 years ago, I just assumed one of those would have made it's way into the main codebase by now.

  5. #4
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Answers
    15
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    Quote Originally Posted by jonsykes View Post
    Yeah, I'm actually doing that right now, hanging it off observable.

    I was just surprised there was nothing baked in. There are 3 or 4 plugins and extensions that look great from 3 or 4 years ago, I just assumed one of those would have made it's way into the main codebase by now.
    You're right - this is bread-and-butter functionality - I would think it would have made it in by now!

    stevil

  6. #5
    Sencha User
    Join Date
    Mar 2009
    Location
    Fort Worth, TX
    Posts
    65
    Vote Rating
    -36
    jemptymethod is infamous around these parts jemptymethod is infamous around these parts jemptymethod is infamous around these parts jemptymethod is infamous around these parts jemptymethod is infamous around these parts

      0  

    Default


    Quote Originally Posted by stevil View Post
    You're right - this is bread-and-butter functionality - I would think it would have made it in by now!

    stevil
    We've all gotten our hands dirty with ExtJS4's "MVC" by now I presume. If so, we certainly understand why this sort of anonymous message pub/sub functionality is *not* baked in: it would not be in the spirit of the new "MVC" functionality. This is a shame because I got high praise for an ExtJS3 app I wrote using pubsub, but moving on to my next app using ExtJS4 I was required to use the MVC functionality and did not fare so well. Next time I'm thinking of using only the views, models, stores and application: no controllers. Views can easily get a handle on the app's viewport, and between the application, viewport, and anonymous message pub/sub style of development, I believe I will have everything necessary to succeed, *without* controllers: I'll let the application and/or viewport provide this sort of central control for the entire application.

  7. #6
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,188
    Answers
    7
    Vote Rating
    102
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      0  

    Default


    The Dojo code is self-contained, so you don't need to use the Ext's Observable.

    Replace the jQuery plugin pattern by wrapping up the Dojo code in the Ext singleton.

    Ext.define('Ext.PubSub', {
    singleton: true,

    // Copy the Dojo code here
    });

    I think that's all you need to do, but I didn't test it.

  8. #7
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Answers
    15
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    Quote Originally Posted by LesJ View Post
    The Dojo code is self-contained, so you don't need to use the Ext's Observable.

    Replace the jQuery plugin pattern by wrapping up the Dojo code in the Ext singleton.

    Ext.define('Ext.PubSub', {
    singleton: true,

    // Copy the Dojo code here
    });

    I think that's all you need to do, but I didn't test it.
    True, and certainly simple, but so many things in the framework inherit Observable that it seems a natural pattern to follow.

    stevil

  9. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    13
    Vote Rating
    0
    jonsykes is on a distinguished road

      0  

    Default


    Just in case anyone is looking for copy paste example, this is what I am using, with some success.

    Code:
    /*
      ExtJs pub/sub plugin by Jon Sykes (jon@sykes.me)
      
      Loosely based on Dojo's Pub/Sub Topic handlers
      Code lifted heavily from the jquery implementation by Peter Higgins
      https://github.com/phiggins42/bloody-jquery-plugins/blob/master/pubsub.js
      
      Original Discussion: http://www.sencha.com/forum/showthread.php?144261
      
    */
    var cache= {};
    
    
    Ext.define("Ext.topic", {
      singleton: true,
      // the topic/subscription hash
      cache: {},
    
    
      publish: function(/* String */topic, /* Array? */args){
        // summary: 
        //    Publish some data on a named topic.
        // topic: String
        //    The channel to publish on
        // args: Array?
        //    The data to publish. Each array item is converted into an ordered
        //    arguments on the subscribed functions. 
        //
        // example:
        //    Add an event listener to a grid that publishes to the 
        //    something/happened topic on select
        //
        //  |   listeners: {
        //  |     'select' : function(grid, rowIndex, e){
        //  |       Ext.topic.publish("something/happened", [rowIndex]);
        //  |     }
        //  |   }
        //
        this.cache[topic] && Ext.each(this.cache[topic], function(){
          this.apply(Ext.topic, args || []);
        });
      },
    
    
      subscribe: function(/* String */topic, /* Function */callback){
        // summary:
        //    Register a callback on a named topic.
        // topic: String
        //    The channel to subscribe to
        // callback: Function
        //    The handler event. Anytime something is $.publish'ed on a 
        //    subscribed channel, the callback will be called with the
        //    published array as ordered arguments.
        //
        // example:
        //    Add an event listener to a panel that subscribes to the 
        //    something/happened topic and triggers it's handler function
        //  
        // example:
        //  |   listeners:{
        //  |     render: function(){
        //  |       Ext.topic.subscribe("something/happened", this.handleChangeWell);
        //  |     }
        //  |   }
        //
        if(!this.cache[topic]){
          this.cache[topic] = [];
        }
        this.cache[topic].push(callback);
        return [topic, callback]; // Array
      },
    
    
      unsubscribe: function(/* Array */handle){
        // summary:
        //    Disconnect a subscribed function for a topic.
        // handle: Array
        //    The return value from a $.subscribe call.
        // example:
        //  |   var handle = Ext.topic.subscribe("something/happened", function(){});
        //  |   Ext.topic.unsubscribe(handle);
        //  |   // best practice would be to put these in an array and on destroy of 
        //  |   // the parent widget loop through and unsubsribe to all the topics.
    
    
        var t = handle[0];
        this.cache[t] && Ext.each(this.cache[t], function(idx){
          if(this == handle[1]){
            this.cache[t].splice(idx, 1);
          }
        });
      }
    });

  10. #9
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Answers
    15
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    It doesn't, but I whipped up a simple mechanism you could extend to your liking:

    Code:
    // Define
    
    
    Ext.define('PubSub', {
      extend: 'Ext.util.Observable',
    
    
      statics: {
        instance: null,
    
    
        subscribe: function (topic, listener, scope) {
          // Route messages through instance
          if (!PubSub.instance) {
            PubSub.instance = new this();
          }
    
    
          var inst = PubSub.instance;
    
    
          // Ensure that event is declared
          if (!inst.events[topic]) {
            inst.addEvents(topic);
          }
    
    
          // Then listen on it, with declared scope
          inst.mon(inst, topic, listener, scope || inst);
        },
    
    
        publish: function () {
          var inst = PubSub.instance;
          var args = Ext.Array.toArray(arguments);
          var topic = args[0];
    
    
          // If the topic has been declared through subscribe
          if (inst && topic && inst.events[topic]) {
            // A quirk in Observable requires me to lowercase the topic name
            // I could have used inst.fireEvent(topic, args.slice(1))
            // but the listener would get the args as a single array 
            // parameter in arguments[0].
            // This allows the published arguments to be passed properly.
           
            var evt = inst.events[topic.toLowerCase()];
            evt.fire.apply(evt, args.slice(1));
          }
        }
      }
    });
    
    
    // Subscribe
    
    
    PubSub.subscribe('testTopic', function (a, b) {
      alert(a + ' = ' + b);
    }, this);
    
    
    PubSub.subscribe('testTopic', function (a, b) {
      alert(a + ' != ' + b);
    }, this);
    
    
    // Publish
    
    
    PubSub.publish('testTopic', 'x', 5);
    Note - this is rudimentary - it doesn't have topic management (remove listeners and event declarations), but that could be added.

    hope this helps,

    stevil
    Last edited by stevil; 18 Aug 2011 at 11:51 AM. Reason: formatting

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar