How to inherit from Resizer?

Question

ExtJS/Sencha

There is a simple MVC application. A brief task is to make a view for Ext.resizer.Resizer.
The problem is that it is not possible to redefine this particular component. When replacing the expandable element with any other, the application works fine.
How can this problem be solved without breaking the pattern?
Code (ExtJS 4.1.3):

//app<br>
Ext.Loader.setConfig({<br>
    enabled: true<br>
});<br><br>
Ext.application({<br>
    name: 'Practice',<br>
    appFolder: '/app',<br>
    launch: function () {<br>
        Ext.create('Practice.view.Resizer');<br>
    },<br>
    controllers: ['Controller']<br>
});<br><br>
//controller<br>
Ext.define('Practice.controller.Controller', {<br>
    extend: 'Ext.app.Controller',<br>
    views: ['Resizer']<br>
});<br><br>
//view, properties were deleted<br>
Ext.define('Practice.view.Resizer', {<br>
    extend: 'Ext.resizer.Resizer'<br>
});

Answer 1

The problem was solved by creating a widget. The point was that Resizer is inherently a method, not an object.

Ext.define('Practice.view.ResizeElement', {
    extend: 'Ext.resizer.Resizer',
    alias: 'widget.resizer'
});

Ext.define('Practice.view.Resizer', {
    extend: 'Ext.panel.Panel',
    initComponent: function () {
        this.items = [
            {
                xtype: 'resizer'
            }
        ];
        this.callParent(arguments);
    }
});

Answer 2

Why is the config for the resizable view not suitable for you? docs.sencha.com/extjs/4.1.3/# !/api/Ext.view.View-cfg-resizable