In a typical real world application there might be quite a number of Views and Controllers similar to each other but doing different things, e.g., operating on different data sets. It is inefficient to repeat the same code over and over in different classes, and some code sharing technique is required. For Views, we can easily abstract most of the code in a base View class and add the required configuration in subclasses:

Ext.define('MyApp.view.AbstractPanel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.mypanel',
    
    bbar: [{
        xtype: 'button',
        itemId: 'okButton',
        text: 'OK'
    }, {
        xtype: 'button',
        itemId: 'cancelButton',
        text: 'Cancel'
    }],
    
    ...
});

Ext.define('MyApp.view.FooPanel', {
    extend: 'MyApp.view.AbstractPanel',
    alias: 'widget.foopanel',
    
    // We are overriding buttons in this view
    bbar: [{
        xtype: 'button',
        itemId: 'yesButton',
        text: 'Yes'
    }, {
        xtype: 'button',
        itemId: 'noButton',
        text: 'No'
    }],
    
    ...
});

Ext.define('MyApp.view.BarPanel', {
    extend: 'MyApp.view.AbstractPanel',
    alias: 'widget.barpanel',
    
    // This view has the same buttons as base class,
    // and also an informational side bar, so we need to
    // accommodate for it
    dockedItems: [{
        xtype: 'panel',
        itemId: 'sidebar'
    }],
    
    ...
});

What about Controllers then? In fact, nothing prevents us from taking the same approach, albeit we will have to do it in slightly less automated way:

Ext.define('MyApp.controller.AbstractController', {
    extend: 'Ext.app.Controller',
    
    // Matches any MyApp.view.AbstractPanel descendant by xtype
    viewSelector: 'mypanel',
    okSelector: 'button#okButton',
    cancelSelector: 'button#cancelButton',
    
    constructor: function(config) {
        Ext.apply(this, config);
        
        var tplRefs = [{
                ref: 'view',
                selector: this.viewSelector
            }, {
                ref: 'okButton',
                selector: this.viewSelector + ' > ' + this.okSelector
            }, {
                ref: 'cancelButton',
                selector: this.viewSelector + ' > ' + this.cancelSelector
            }];
        
        this.refs = this.refs ? Ext.merge(tplRefs, this.refs) : tplRefs;
        
        this.callParent(arguments);
    },
    
    ...
});

Ext.define('MyApp.controller.Foo', {
    extend: 'MyApp.controller.AbstractController',
    
    // Now we only have to provide selectors, and voila -
    // the refs will be created automagically
    viewSelector: 'foopanel',
    okSelector: 'button#yesButton',
    cancelSelector: 'button#noButton',
    
    ...
});

Ext.define('MyApp.controller.Bar', {
    extend: 'MyApp.controller.AbstractController',
    
    // Buttons are the same so we only provide view selector
    viewSelector: 'barpanel',
    
    // We can add some refs that are unique to this View -
    // in our case, it is the sidebar. The refs should be as
    // precise as it is feasible, to avoid collisions with
    // other Views.
    refs: [
        { ref: 'sidebar', selector: 'barpanel > panel#sidebar' }
    ],
    
    ...
});

In the above example, we have abstracted a lot of duplicating functionality in our base Controller, greatly simplifying children Controller classes. A similar approach can be used with `control` component selectors and `listen` event domain selectors, respectively.