Add a header to a viewport component

Question

I have created a viewport in ExtJS 6.2.0 like so :

    Ext.define('Mine.view.Main', {
        extend: 'Ext.container.Viewport',
        alias: 'widget.main',
        id: 'mainView',
        xtype : 'mainV', ...

With a region south collapsible panel. I want to add a fixed Header at the top so I added as an item of the viewport this :


   {
        region: 'north',
        //collapsed: true,
        xtype: 'panel',
        height: 30,
        collapsible:false,
        layout: 'border',
        collapsed: false
        // titleCollapse: true
    },

But I am not getting a fixed header, instead I am getting a collapsible north window. How to achieve this?

Thanks!

ites ites · Accepted Answer · 2020-10-26T19:00:16

My bad i was defaulting my viewport to have item panels collapsible. So i got what i wanted by removing the collapsible true from defaults config in my viewport and setting items with property collapsible in a customized way (true or false each depending on the case)

Add a header to a viewport component

1 Answers