Results 1 to 2 of 2

Thread: Architect 4.2.5.420 Framework ExtJS 6.7 classic and Admin Dashboard example

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

    Default Answered: Architect 4.2.5.420 Framework ExtJS 6.7 classic and Admin Dashboard example

    Hi,

    Has anyone been able to reproduce the responsive functionality of the Admin Dashboard Example app from the Architect?

    I am focused right now on simply replicating the behavior of the toolbar and TreeList menu, however it appears I am missing something that I presume must be fairly basic. When I emulate a phone in the browser the screen is scaled down to unreadable proportions as opposed to behaving elegantly as the published example does.

    I have added Ext.Responsive to the requires of the ViewPort, however the browser reports "[W] responsive plugin is deprecated; require "Ext.Responsive" instead" which seems to be coming from Architect generated code

    Any pointers, criticism or clues will be gratefully received,

    with thanks,

    -Allen

    Code:
    Ext.define('TemplApp.view.mainView', {    extend: 'Ext.container.Viewport',
        alias: 'widget.mainview',
    
    
        requires: [
            'TemplApp.view.mainViewModel',
            'TemplApp.view.mainViewControler',
            'Ext.plugin.Responsive',
            'Ext.toolbar.Toolbar',
            'Ext.button.Button',
            'Ext.toolbar.Fill',
            'Ext.list.Tree',
            'Ext.Responsive'
        ],
    
    
        controller: 'mainviewcontroler',
        viewModel: {
            type: 'mainviewmodel'
        },
        height: 250,
        itemId: 'mainView',
        width: 400,
        responsiveConfig: '!0,\nprivates: {\nupdateResponsiveState: function () {\n    this.handleViewportResize();\n    this.mixins.responsive.updateResponsiveState.call(this)\n    }\n}',
    
    
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [
            {
                xtype: 'toolbar',
                height: 70,
                itemId: 'headerBar',
                items: [
                    {
                        xtype: 'component',
                        reference: 'qLogo',
                        height: 64,
                        html: '<div class="title-bar-logo"><img src="resources/images/S_Shield-64x64.png">Sweat 440</div>',
                        padding: '0 0 0 8',
                        width: 250
                    },
                    {
                        xtype: 'button',
                        iconCls: 'x-fa fa-navicon',
                        listeners: {
                            click: 'onButtonClick'
                        }
                    },
                    {
                        xtype: 'tbfill'
                    },
                    {
                        xtype: 'button',
                        ui: 'header',
                        iconCls: 'x-fa fa-question'
                    }
                ]
            },
            {
                xtype: 'container',
                beforeLayout: function() {
                    console.log('fix this after adding treelist');
                    var b = this,
                        a = Ext.Element.getViewportHeight() - 64,
                        c = b.getComponent('navigationTreeList');
                    b.minHeight = a;
                    c.setStyle({
                        'min-height': a + 'px'
                    });
                    Ext.container.Container.prototype.beforeLayout.apply(this, arguments);
    
    
                },
                flex: 1,
                reference: 'mainContainerWrap',
                id: 'main-view-detail-wrap',
                scrollable: true,
                responsiveConfig: '\'width < 800\': {\n      layout: {\n         vertical: true\n      }\n}\n\'width >= 800\': {\n      layout: {\n         vertical: false\n      }\n }',
                layout: {
                    type: 'hbox',
                    align: 'stretchmax'
                },
                items: [
                    {
                        xtype: 'treelist',
                        itemId: 'navigationTreeList',
                        reference: 'navigationTreeList',
                        height: 300,
                        width: 250,
                        store: 'NavigationTree',
                        listeners: {
                            selectionchange: 'onNavigationTreeListSelectionChange'
                        }
                    }
                ],
                plugins: [
                    {
                        ptype: 'responsive'
                    }
                ]
            }
        ],
        plugins: [
            {
                ptype: 'responsive'
            }
        ]
    
    
    });

  2. after more bumbling about I need to report that my observations are attributable to Chrome (74.0.3729.131) on windows. when using the Chrome device emulator from the dev tools, on all devices other than the responsive desktop the width and height recognized by my Ext code are 3x what the emulator suggests they ought to be. When testing the same code in Firefox Ext reports the expected values, and the appearance is about as expected.

    -Allen


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

    Default

    after more bumbling about I need to report that my observations are attributable to Chrome (74.0.3729.131) on windows. when using the Chrome device emulator from the dev tools, on all devices other than the responsive desktop the width and height recognized by my Ext code are 3x what the emulator suggests they ought to be. When testing the same code in Firefox Ext reports the expected values, and the appearance is about as expected.

    -Allen


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
  •