Results 1 to 5 of 5

Thread: Expose new event types from components (for use in controllers).

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    114
    Answers
    5

    Question Expose new event types from components (for use in controllers).

    Let me give you an example to start, let's say I want to extend the imagecomponent (i.e. xtype: 'image') so that it can handle for a generic click event. I already know I can do something like this:

    Code:
    {
      xtype: 'image',
      listeners: {
        el: {
          click: function () {
            //do a specific action here...
          }
        }
      }
    }
    but that is either done during and inline config, or by extending the imagecomponent, and it servers to "handle" the click event directly. But what if I am creating is a generic component that I want to conform to MVC. How can I add the previously non-existent click event to the component so that it can be caught and handled at the controller level. Giving users of my extended component that ability to implement their own click handlers now that I've exposed the event.

  2. #2
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    542
    Answers
    4

    Default

    Quote Originally Posted by Maxeta View Post
    ... But what if I am creating is a generic component that I want to conform to MVC. How can I add the previously non-existent click event to the component so that it can be caught and handled at the controller level. Giving users of my extended component that ability to implement their own click handlers now that I've exposed the event.
    By simply firing an event you want, no?
    Inside the component you creating:

    Code:
    /**
     * @event my-super-cool-new-event
     *
     * Notifies a user that my component has done it's super-cool-new feature
     *
     * @param {MyComponent} this
     */
    this.fireEvent('my-super-cool-new-event', this);

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    114
    Answers
    5

    Default

    But that would actually fire the event right? so if I did...

    Code:
    {
      xtype: 'image',
      listeners: {
        el: {
          click: function () {
            this.fireEvent('click', this);
          }
        }
      }
    }
    wouldn't that be infinite recursion? or am I missing something...

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    542
    Answers
    4

    Default

    Quote Originally Posted by Maxeta View Post
    wouldn't that be infinite recursion? or am I missing something...
    You listen to the event on component's element, but you fire event on behalf of the component, no recursion will occur, those a separate entities.

  5. #5
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    114
    Answers
    5

    Question

    When I try to use:

    Code:
    this.fireEvent('click', this);
    in my view (hoping to catch it in my controller), I get a "JavaScript runtime error: Object doesn't support property or method 'fireEvent'" on line 16963 in ext-all-debug-w-comments.js:

    Code:
    return gen.call(dom, e, options, fn, scope, ename, dom, wrap, args, Ext, EventManager);
    I've tried to use this.dom.fireEvent('click', this); as well with the same result.

    any ideas?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •