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?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar