Results 1 to 3 of 3

Thread: Is it possible to build a responsive app using Architect?

  1. #1
    Sencha Premium User
    Join Date
    Jun 2009
    Location
    Fort Lauderdale
    Posts
    27
    Answers
    1

    Default Is it possible to build a responsive app using Architect?

    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);
        }
    
    
    });

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,006
    Answers
    5

    Default

    Thank you so much for your post. I apologize for the delay. I have shared this with the support staff and someone will get back to provide assistance as soon as possible. Your patience is greatly appreciated!

    Kind Regards,

    Michele


  3. #3
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    147
    Answers
    15

    Default

    Quote Originally Posted by bluewwol View Post
    My current setup:
    Framework: Ext JS 6.7.x Classic

    I would start by changing to Ext JS 6.7.x Modern as the modern toolkit is designed for responsiveness whereby classic toolkit is more for contemporary browser applications.

    In our own development we have discovered many things in the classic toolkit that are not as "responsive" as one expects when using it on mobile devices such as tablets and phones. We will be changing our product over to the modern toolkit as a result.
    Andy Allord
    Sencha MVP/Software Engineer

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •