My current setup:
Version: 4.2.5.420
Channel: 4.2-stable
Platform: 1.6.2.49 - win32 x64
Renderer: 56.0.2924.87
Cmd: 6.7.0.63
Framework: Ext JS 6.7.x Classic

I have resorted to the simplest setup to try get this to work, so far an absolute fail.
Here is what I am trying to accomplish, Add viewport, add 2 panels. when screen width drops below 600px the panels should change from being horizontally aligned to vertically aligned. This sounds simple enough, however the browser generates the following error
ext-all-rtl-debug.js?_dc=1557954448075:10375 [W] responsive plugin is deprecated; require "Ext.Responsive" instead.
My code is below, if one looks at row 9 you will see Ext.Responsive is required, However on row 39 you will see a responsive plugin. This responsive plugin code is generated by Architect and I can not find a way to get rid of it. This would seem to be a major problem.

Any help, pointer, guidance or even silly suggestions would be greatly appreciated.

-Allen

Code:
Ext.define('MyApp1.view.mainAppView', {    extend: 'Ext.container.Viewport',
    alias: 'widget.mainappview',


    requires: [
        'MyApp1.view.mainAppViewViewModel',
        'Ext.plugin.Responsive',
        'Ext.panel.Panel',
        'Ext.Responsive'
    ],


    viewModel: {
        type: 'mainappview'
    },
    height: 250,
    width: 400,
    responsiveConfig: 'responsiveConfig',


    layout: {
        type: 'hbox',
        align: 'stretchmax'
    },
    items: [
        {
            xtype: 'panel',
            height: 250,
            html: 'nav content',
            width: 250,
            title: 'Nav panel'
        },
        {
            xtype: 'panel',
            flex: 1,
            html: 'real content',
            minWidth: 300,
            title: 'Main panel'
        }
    ],
    plugins: [
        {
            ptype: 'responsive'
        }
    ],


    beforeLayout: function() {
        console.log('beforeLayout');


        var responsiveWidthBreakPoint = 600;
        var responsiveConfig = {};


        console.log('fix this after adding treelist');
        var b = this,
            srcnHeight = Ext.Element.getViewportHeight(),
            scrnWidth = Ext.Element.getViewportWidth();
        //    c = b.getComponent('navigationTreeList');
        console.log('height ' + srcnHeight);
        console.log('width ' + scrnWidth);
        console.log(b.layout);
        console.log(b);


        /*
        b.minHeight = a;
        c.setStyle({
            'min-height': a + 'px'
        });
        Ext.container.Container.prototype.beforeLayout.apply(this, arguments);
        */




        // MIN
        responsiveConfig[ 'width < ' + responsiveWidthBreakPoint] = {
            layout: { type: 'vbox',
                      // vertical: true,
                      align: 'stretch'
                    }
        };


        // MAX
        responsiveConfig[ 'width >= ' + responsiveWidthBreakPoint] = {
            layout: { type: 'hbox'
                      // vertical: false
                    }
        };
        console.log(responsiveConfig);




        console.log('srcnHeight ' + srcnHeight);
        console.log('scrnWidth ' + scrnWidth);
    }


});