Function Called Multiple Times

[SlimCubes]

I've written a function that is called multiple times when it shouldn't be and I can't figure out why. Here are the steps I take to reproduce the problem:

(1) From the TopicList grid panel, I click the the Add Topic button. A TopicEdit window containing a Cancel button appears.
(2) I click the Cancel button. The resulting onCancelTopic function is called once (as it should be).
(3) I close the TopicEdit window and click the Add Topic button to bring the TopicEdit window back up.
(4) I click the Cancel button. The resulting onCancelTopic function is called twice (when it should only be called once).

Here's a stripped down version of the extjs code:

Ext.define
(
  'ToolboxTopics.controller.Topics',
  {
    extend: 'Ext.app.Controller',
    views: ['TopicList', 'TopicEdit'],
    
    init: function()
    {
      this.control
      (
        {
          'topiclist button[action=addTopic]': {click: this.onAddTopic}
        }
      )
    },

    onAddTopic: function()
    {
      this.control
      (
        {
          'topicedit button[action=cancel]': {click: this.onCancelTopic}
        }
      );
      Ext.widget('topicedit');
    },

    onCancelTopic: function()
    {
      console.log("cancel");
    }
  }
);


Ext.define
(
  'ToolboxTopics.view.TopicList' ,
  {
    extend: 'Ext.grid.Panel',
    alias : 'widget.topiclist',
    dockedItems:
    [
      {
        xtype: 'toolbar', 
        items:
        [
          {
            xtype: 'button', 
            text: 'Add Topic', 
            action: 'addTopic'
          }
        ]
      }
    ],
    columns:
      [
      ]
  }
);


Ext.define
(
  'ToolboxTopics.view.TopicEdit',
  {
    extend: 'Ext.window.Window',
    alias : 'widget.topicedit',
    autoShow: true,
    height: 350,
    width: 525,
      
    initComponent: function()
    {

      this.buttons =
      [
        {
          text: 'Cancel', 
          action: 'cancel'
        }
      ];
      
      this.callParent(arguments);
    }
  }
);

If someone would explain why the onCancelTopic function is called more times than it should, I would greatly appreciate it.

[evant]

Control should only ever be called once, the listeners are bound for the lifetime of the controller.

[SlimCubes]

That fixed the problem. Thanks, Evan!

For anyone who might read this later on, I rewrote the controller so that the control function is only called once (from the init function):

Ext.define
(
'ToolboxTopics.controller.Topics',
{
extend: 'Ext.app.Controller',
views: ['TopicList', 'TopicEdit'],

init: function()
{
this.control
(
{
'topiclist button[action=addTopic]': {click: this.onAddTopic},
'topicedit button[action=cancel]': {click: this.onCancelTopic}
}
)
},

onAddTopic: function()
{
Ext.widget('topicedit');
},

onCancelTopic: function()
{
console.log("cancel");
}
}
);