1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    2
    Vote Rating
    0
    SlimCubes is on a distinguished road

      0  

    Default Function Called Multiple Times

    Function Called Multiple Times


    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:

    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.
    Last edited by evant; 12 Jun 2012 at 4:03 PM. Reason: [code][/code] tags

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,169
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Control should only ever be called once, the listeners are bound for the lifetime of the controller.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    2
    Vote Rating
    0
    SlimCubes is on a distinguished road

      0  

    Default


    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");
    }
    }
    );

Thread Participants: 1