Results 1 to 6 of 6

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

  1. #1
    Sencha Premium User
    Join Date
    Jun 2009
    Location
    Fort Lauderdale
    Posts
    31
    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
    150
    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

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

    Default

    Andy;

    I think then your documentation should be corrected.
    Your tutorials are years and versions out of date, and evidently incorrect.

    Quote Originally Posted by aallord View Post
    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.

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

    Default

    Quote Originally Posted by bluewwol View Post
    Andy;

    I think then your documentation should be corrected.
    Your tutorials are years and versions out of date, and evidently incorrect.
    Actually it isn’t documentation. Ext JS 4.x didn’t support responsive/mobile. Touch was created for that. Even with Ext JS 6.7 classic is not very responsive and quickly gets worse when in a mobile environment. This remains true even in Ext JS 7. Classic for full desktop browser. Responsive/mobile us Modern. Modern replaced Touch.
    Andy Allord
    Sencha MVP/Software Engineer

  6. #6
    Sencha Premium User dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,242
    Answers
    26

    Default

    Sencha frameworks use adaptive design, the sister of responsive design... two approaches to the same issue. While Sencha added responsive abilities, the framework is built to use adaptive design (aka event triggered resize).

    adaptive vs responsive is like the debate between foundation and boostrap.
    Cloud Application Architect

    Sencha Specialist / Sencha MVP / Sencha Technical Trainer
    ExtJs Developer + Contributor since 0.2.2 - Champion of the per developer license.

Posting Permissions

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