Threaded View

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    17
    Answers
    1
    Vote Rating
    0
    mminnie is on a distinguished road

      0  

    Default Answered: Best Practice for Handling Events in Subcomponents

    Answered: Best Practice for Handling Events in Subcomponents


    I want to once a gain thank the developers and contributors to ExtJS. There is much great documentation on the framework and many great forum posts, but I do see some (including some ExtJS 3.x experienced users) taking a bit to grasp the MVC of ExtJS 4.x. I think my question is fairly simple, but I didn't find a forum post or other documentation that answered my question. This may just be that the MVC structure of 4.x hasn't had time to generate as big of a knowledge base as earlier versions.

    I see many ways to handle events, but I'm interested in what is the best ExtJS 4.x MVC way to handle the events of a view. I have a user grid panel that is contained in a tab panel. I want to handle a double click on the user record in the grid to open up another tab for that specified user. My question is: Is the BEST PLACE in the ExtJS MVC design to "bubble-up" the grid itemdblclick event (or any other event from a view controlled by a controller) to the controller (User controller in my case)?

    UserList.jpg

    Code:
    Ext.define('LB.controller.Users', {
        extend: 'Ext.app.Controller',
    
        views: ['user.List','user.Tabs'],
        stores: ['Users'],
        models: ['User'],
        init: function() {
            this.control({
                'userlist *': {
                    itemdblclick: function(dataview, record, item, index, e) {
                        // Is this where YOU would put the handling of a itemdblclick for the grid?
                        console.log(record.get('username')+ ' was double clicked.');
                   }
                }  
            })
        }
    });
    Code:
    Ext.define('LB.view.user.Tabs' ,{
        extend: 'Ext.tab.Panel',
        alias : 'widget.usertabs',
        resizeTabs: true,
        enableTabScroll: true,
        defaults: {
            autoScroll:true
        },
        items: [{
            title: 'User List',
            items: [{
                xtype:'userlist',
                id: 'userlist'
            }],
            closable: false
    
    
        }]
    });
    Code:
    Ext.define('LB.view.Viewport', {
        extend: 'Ext.Viewport',
        layout: 'fit',
        
        initComponent: function() {
            this.items = {
                items: [{
                    xtype: 'usertabs'
                }]
            
            };
            
            this.callParent();
        }
    });

  2. Personally I wouldn't use an itemId without putting it in the context of an owner container. I also try to avoid control queries that don't include a custom xtype. So assuming the grid doesn't have its own alias the selector might be something like 'userlist #gridPanel'.

    A couple of other things I would change...

    You should avoid using static ids, e.g. id: 'userlist'.

    Though it's difficult to be sure, it looks like your code might be suffering from excessive panel nesting. For example, here:

    Code:
    items: [{
        title: 'User List',
        items: [{
            xtype:'userlist',
            id: 'userlist'
        }],
        closable: false
    }]
    Why not just this?

    Code:
    items: [{
        closable: false,
        title: 'User List',
        xtype: 'userlist'
    }]
    Implicit in the selector in your original question is that your grid is wrapped in a yet another panel with xtype userlist. From the screenshot it isn't clear why. Shouldn't userlist be the grid?