Results 1 to 1 of 1

Thread: wrong panels layout when using responsiveConfig

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Oct 2015
    Posts
    10

    Default wrong panels layout when using responsiveConfig

    Ext version tested:

    • Ext 5.1.1.451
    • Ext 5.1.3.228

    Browser versions tested against:

    • Android 4.2.2 Chrome 51.0.2704.81 on tablet 1280x800 Lenovo S6000-F
    • Android 5.1.1 native browser on tablet 1280x800 on AVD

    DOCTYPE tested against:

    • <!DOCTYPE HTML>

    Description:
    The behavior is like misplaced behavior of responsiveConfig landscape vs portrait. In landscape orientation 4 panels shoudl be aligned in a grid and in portrait they should layout as a column. On Android [the behavior is exchanged.

    Steps to reproduce the problem:

    • generate fresh application
    • replace app.js with:

    Code:
    Ext.define('PanelsAlingment.view.MonitoringDashboard', {
        extend: 'Ext.container.Container',
        alias: 'widget.monitoringDashboard',
    
        requires: [
            'Ext.plugin.Responsive',
            'Ext.panel.Panel'
        ],
    
        margin: 0,
    
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [
            {
                xtype: 'container',
                flex: 1,
                responsiveConfig: {
                    landscape: {
                        layout: {
                            type: 'box',
                            vertical: false,
                            pack: 'start',
                            align: 'stretch'
                        }
                    },
                    portrait: {
                        layout: {
                            type: 'box',
                            vertical: true,
                            pack: 'start',
                            align: 'stretch'
                        }
                    }
                },
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'panel',
                        flex: 1,
                        title: 'systemHealthWidget'
                    },
                    {
                        xtype: 'panel',
                        flex: 1,
                        title: 'systemInformationWidget'
                    }
                ],
                plugins: [
                    {
                        ptype: 'responsive'
                    }
                ]
            },
            {
                xtype: 'container',
                flex: 1,
                responsiveConfig: {
                    landscape: {
                        layout: {
                            type: 'box',
                            vertical: false,
                            pack: 'start',
                            align: 'stretch'
                        }
                    },
                    portrait: {
                        layout: {
                            type: 'box',
                            vertical: true,
                            pack: 'start',
                            align: 'stretch'
                        }
                    }
                },
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'panel',
                        flex: 1,
                        flex: 1,
                        title: 'updatesWidget'
                    },
                    {
                        xtype: 'panel',
                        flex: 1,
                        title: 'eventLogWidget'
                    }
                ],
                plugins: [
                    {
                        ptype: 'responsive'
                    }
                ]
            }
        ]
    
    });
    
    Ext.define('PanelsAlingment.view.AppViewport', {
        extend: 'Ext.container.Viewport',
        alias: 'widget.ssmviewport',
    
        requires: ['Ext.panel.Panel'],
    
        layout: 'border',
    
        items: [
            {
                xtype: 'monitoringDashboard',
                region: 'center'
            }
        ]
    });
    
    Ext.application({
        name: 'PanelsAlingment',
    
        launch: function() {
            Ext.create('PanelsAlingment.view.AppViewport', {
                renderTo: Ext.getBody()
            });
        }
    });
    The result that was expected:

    correct.png

    The result that occurs instead:

    wrong.png



    sencha fiddle:

    https://fiddle.sencha.com/#fiddle/1bnn
    Last edited by pkoral; 9 Jun 2016 at 10:21 PM. Reason: add sencha fiddle

Similar Threads

  1. Universal App and 'responsiveConfig'
    By jhoweaa in forum Ext JS 6.x Q&A
    Replies: 2
    Last Post: 9 Sep 2015, 1:54 PM
  2. responsiveConfig cannot find setters for layout config items
    By CSchmitz81 in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 22 Jul 2015, 4:18 PM
  3. Recommendation on responsiveConfig vs. before render?
    By IvanJ in forum Sencha Ext JS Q&A
    Replies: 3
    Last Post: 17 Jun 2015, 11:49 AM
  4. Replies: 1
    Last Post: 23 Mar 2015, 8:29 AM
  5. ResponsiveConfig with dynamic width
    By s.noel in forum Ext 5: Q&A
    Replies: 0
    Last Post: 26 Nov 2014, 1:58 AM

Tags for this Thread

Posting Permissions

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