Results 1 to 2 of 2

Thread: layouts

  1. #1
    Sencha User
    Join Date
    Jun 2018
    Posts
    25

    Default layouts

    Hello.

    try to make layouts as needed.

    mainview
    Code:
    Ext.define('Admin.view.main.Main', {
        extend: 'Ext.container.Viewport',
       ....
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
       .......
            {
                xtype: 'maincontainerwrap',
                id: 'main-view-detail-wrap',
                reference: 'mainContainerWrap',
                flex: 1,
                items: [
                    {
                        xtype: 'container',
                        width:250,
                        reference: 'navTreePanel',
                        itemId: 'navTreePanel',
                        style: 'overflow:hidden', // Remove this Line to show Scrollbar
                        layout: 'absolute',
                        items: [
                        {
    
    
                            x: 0,
                            y: 0,
                            anchor: '+17 0',
                            xtype: 'treelist',
                            reference: 'navigationTreeList',
                            itemId: 'navigationTreeList',
                            ui: 'navigation',
                            store: 'NavigationTree',
                            width: 190,
                            style: {
                                'overflow-y':'scroll'
                            },
                            expanderFirst: false,
                            expanderOnly: false,
                            listeners: {
                                selectionchange: 'onNavigationTreeSelectionChange',
                                itemclick: 'onNavigationTreeItemClick'
                            }
                        }]
                    },
                    {
    
    
                        xtype: 'container',
                        flex: 1,
                        reference: 'mainCardPanel',
                        cls: 'sencha-dash-right-main-container',
                        itemId: 'contentPanel',
                        scrollable: 'y', 
    
    
                        //
                        //
                        layoutConfig:{layoutOnCardChange:true},
                        layout: {
                            type: 'card',
                            anchor: '100%'
                        }
                    }
                    ] 
                } 
    
    ....
    ContentWraper

    Code:
    Ext.define('Admin.view.main.MainContainerWrap', {
        extend: 'Ext.container.Container',
        xtype: 'maincontainerwrap',
    
    
        requires : [
            'Ext.layout.container.HBox'
        ],
    
    
        scrollable: 'y',
    
    
        layout: {
            type: 'hbox',
            align: 'stretch', //max
    
    
            // Tell the layout to animate the x/width of the child items.
            animate: true,
            animatePolicy: {
                x: true,
                width: true
            }
        },
    
    
        beforeLayout : function() {
            // We setup some minHeights dynamically to ensure we stretch to fill the height
            // of the viewport minus the top toolbar
    
    
            var me = this,
                height = Ext.Element.getViewportHeight() - 64,  // offset by topmost toolbar height
                // We use itemId/getComponent instead of "reference" because the initial
                // layout occurs too early for the reference to be resolved
                navTree = me.down('#navigationTreeList');
                //navTree = me.getComponent('navigationTreeList');
    
    
            me.minHeight = height;
    
    
            navTree.setStyle({
                'min-height': height + 'px'
            });
    
    
            me.callParent(arguments);
        }
    });

    and view, that inserted into mainCardPanel

    Code:
    Ext.define('Admin.view.charts.Perf', {
        extend: 'Ext.container.Container',
        xtype: 'Perf',
    
    
        viewModel: {
            type: 'charts'
        },
    
    
    
    
        layout: 'responsivecolumn',
    
    
        defaults: {
            defaults: {
                animation : !Ext.isIE9m && Ext.os.is.Desktop
            }
        },
    
    
        items: [
            {
                xtype: 'panel',
                cls: 'faq-left-sidebar shadow',
                margin: 10,
                header: false,
                ui: 'light',
                 title :' sdasdasdasd',
                responsiveConfig: {
                    'width < 1000': {
                        width: 0,
                        visible: false
                    },
                    'width >= 1000 && width < 1600': {
                        width: 230,
                        visible: true
                    },
                    'width >= 1600': {
                        width: 300,
                        visible: true
                    }
                },
                items: [
                { // тут layout fit
                    xtype:'gridpanel',
                    store: 'acadPerfStore',
                
                    columns: [
                            .....
                    ]
            }
                ]
             }
        ],
        initComponent: function() {
            
                
        this.callParent(arguments);                                
     
                
    
    
        }        
    });

    all good. navTreePanel locked, if content in mainCardPanel have big height. if scroll content of mainCardPanel treePanel allways visible.

    height is like this
    Admin.view.charts.Perf - 123
    inside Admin.view.charts.Perf
    Ext.panel.Panel - 16877
    Ext.grid.Panel - 16877

    If i understand right - panel in Admin.view.charts.Perf stretch into full height of Ext.grid.Panel, that contain Ext.grid.Panel

    How make that panel in Admin.view.charts.Perf not to stretch into full height of Ext.grid.Panel, but Ext.grid.Panel will have height of visible height of window and have a scroll?
    So i need scroll not in Ext.panel.Panel, but in Ext.grid.Panel

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,005

    Default

    I have passed on your question to a team member and we are working to get you an answer. Thanks!

Similar Threads

  1. Help me with layouts
    By indapublic in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 5 Sep 2012, 12:57 AM
  2. Creating absolute positioned layouts or other complex layouts
    By Ayame in forum Sencha Touch 1.x: Q&A
    Replies: 2
    Last Post: 23 Sep 2011, 1:41 AM
  3. Help with Layouts, Part 2 - how "height in ems" fits into layouts in extjs?
    By Eric.Sencha in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 17 Sep 2010, 9:38 AM
  4. Using Layouts 2.0
    By t_rectenwald in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Dec 2007, 4:11 PM

Posting Permissions

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