Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Button or MenuItem controllers

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    133

    Default Button or MenuItem controllers

    Is it possible to put a controller on a menuItem of a button - in my understanding I thought it was possible to have a controller attached at any point in the hierarchy

    Specifically this works

    Code:
    {
        xtype: 'button',
        controller: 'logoutController',
        menu: {
            xtype: 'menu',
            items: [{
                text: 'Logout',
                listeners: {
                    click: 'onClickLogout' 
                }
             }]
        }}
    this however does not

    Code:
    {
        xtype: 'button',
        menu: {
            xtype: 'menu',
            items: [{
                text: 'Logout',
                controller: 'logoutController',
                listeners: {
                    click: 'onClickLogout' 
                }
             }]
       }}
    Whatty

    Last edited by mitchellsimoens; 22 Apr 2015 at 4:56 AM. Reason: added testcase

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450

    Default

    I'm going to move this to the bugs forum as I would expect that to work. Same thing with the handler config.

    I also added a fiddle test case.

  3. #3
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,425

    Default

    Looks like a bug, but this fiddle works.

    Also, unless you subclass the MenuItem class, I'd recommend setting up the view controller on the menu. You probably want to avoid creating a view controller instance for each menu item. If you have many items, this won't be very efficient.

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253

    Default

    This isn't a bug, the behaviour is intentional. Consider:

    Code:
    Ext.define('SomeContainer', {
        extend: 'Ext.container.Container',
        controller: 'foo'
    });
    Ext.define('MyComponent', {
        extend: 'Ext.Component',
        xtype: 'my',
        controller: 'bar',
    
        listeners: {
            click: 'someBarMethod'
        }
    });
    
    new SomeContainer({
        items: {
            xtype: 'my',
            listeners: {
                click: 'someFooMethod'
            }
        }
    });
    When MyComponent is declared, the Observable scans the listeners to see if any are on the class definition and if they provide methods that need to be dynamically scoped. If they exist, that get marked as "self", indicating they were declared on the class and should look for the dynamic method on the class itself, or the controller directly attached to this class.

    In the second usage where the component is added as a child of SomeContainer, that processing isn't done, the assumption is that because listeners are being declared "outside" the class, it's supposed to participate with the component hierarchy.

    The main reason for this is due to how components are encapsulated. The controller that a component uses is essentially "private" to that class, it's an implementation detail of that class. So, if the listeners are declared on the class body, it means these listeners will be bound whenever the component is used, no matter what hierarchy it is nested under. As such, it's assumed, for the sake of consistency, that listeners will refer to something definite that can always be accessed by the class.

    For the other scenario, it's essentially the same. If I'm a user consuming MyComponent, I don't really know or care what controller it uses. So, let's say BarController & FooController both have an 'onClick' method. As a consumer of MyComponent, if I attach an 'onClick' listener I certainly not expect it to route to the internal BarController method (remembering that as a user of the API, I don't know anything about the controller it has).

    It's fairly atypical to want to dynamically assign the controller as you're doing in that example. You can still force the scope to resolve in a particular way by declaring that menuitem as a subclass and assign the controller/listeners there.

    We have a doc ticket open to better explain these named scope options, however the current behaviour of how the scope resolves is intended.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    133

    Default

    Thanks for the description of the issue.

    So let me post it back to you in the form of a use case - I have a menu system where as expected I can have group of menu items that are closely related but unique enough that I would like to keep the behaviour in their own controllers - not an unreasonable request or design.

    How do I accomplish that without creating a bunch of menuItem subclasses (I believe that would work given your description) or a big controller handling all the "unrelated" menu actions.

    Think of a Application menu containing the following items - User Preferences / Help / About / Logout - which happens to be exactly the problem I am trying to solve.

    Thanks in advance.

    Whatty

  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253

    Default

    I'm not really sure what you mean by "keep their behaviour in their own controllers". All a menu item can really do is react to the click event. Why create a controller per menu item? That doesn't seem to be a reasonable design.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #7
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    133

    Default

    Look at my use case - I want a controller behind each of those individual actions - so I would have four independent controllers, each hooked up to the click event on the menuItem.
    • UserPreferencesController
    • HelpController
    • AboutController
    • LogoutController
    Each controller would be responsible for handling the actions behind the click on the menu item, and the behaviour is unique enough that it warrants putting these into their own classes.

    BTW - I have confirmed that creating a bunch on sub-classes of menuItem with the controller set in the subclass works as expected.




  8. #8
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    133

    Default

    I created a Fiddle to demonstrate what I am talking about



    BTW - how do I insert a Fiddle into the forum like what Mitchell did

  9. #9
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450

    Default

    Quote Originally Posted by Whatty View Post
    BTW - how do I insert a Fiddle into the forum like what Mitchell did
    Use the custom FIDDLE BBCode (the fiddle id is within the FIDDLE tags:

    [FIDDLE]lpg[/FIDDLE]
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  10. #10
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,425

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Use the custom FIDDLE BBCode (the fiddle id is within the FIDDLE tags:

    [FIDDLE]lpg[/FIDDLE]
    This is not too obvious. Is it possible to add a button similar to the Link button to embed a fiddle?

Page 1 of 2 12 LastLast

Similar Threads

  1. [FIXED] What happened to to the Ext.button.Button button, e, eOpts args for controller
    By denisputnam in forum Sencha Architect 3.x: Bugs
    Replies: 3
    Last Post: 21 Jan 2015, 7:45 AM
  2. What happened to to the Ext.button.Button button, e, eOpts args for controller
    By denisputnam in forum Sencha Architect 3.x: Q&A
    Replies: 2
    Last Post: 19 Jan 2015, 10:30 AM
  3. Button split controller
    By gaiapuffo in forum Ext: Discussion
    Replies: 1
    Last Post: 6 Jul 2014, 10:36 AM
  4. Help with my controller and navigating with a button tap
    By 8dot3 in forum Sencha Touch 2.x: Discussion
    Replies: 2
    Last Post: 7 Dec 2013, 4:50 PM
  5. controller problem, button not react
    By twisted_zero in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 30 Mar 2012, 4:28 AM

Posting Permissions

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