0

I have a west region panel in a border layput that uses dockedItems. This panel is initially empty. If I dont specify any height for this panel, the dockedItem are placed one below the other. I want the panel to use entire available height and dock the items at the top and bottom of the panel. How can I do this?

JSFiddle: https://jsfiddle.net/kavitaC/rtopn7fd/

Ext.define('MyForm', {
        extend: 'Ext.form.Panel',

        renderTo:Ext.getBody(),
        title: 'My Form',
           //height: 800,
        layout: 'fit',

        initComponent: function() {
            var me = this;

            Ext.applyIf(me, {
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [
                            {
                                xtype: 'filefield',
                                buttonOnly: true
                            }
                        ]
                    },
                    {
                        xtype: 'toolbar',
                        dock: 'bottom',
                        items: [
                            {
                                xtype: 'filefield',
                                buttonOnly: true
                            }
                        ]
                    }
                ]
            });

            me.callParent(arguments);
        }
    });

    Ext.application({
        name:'App',

        launch:function(){
            var form = Ext.create('MyForm');

        }
    });
Tarabass
  • 3,132
  • 2
  • 17
  • 35
KavitaC
  • 635
  • 7
  • 29
  • Well, what is the "entire available height" in your example? It shows a standalone panel, not a border layout item. In case of a border layout everything should be fine — the panel height will depend on the parent container's height. – Greendrake Aug 14 '15 at 15:15
  • Drake, the entire available height is almost full window Ext.getBody().getHeight(). I tried to set the panel height to this but I would need to add a listener every time the window size changes. Is there any other way? – KavitaC Aug 14 '15 at 15:25
  • You need to use [`viewport`](https://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport) then. By default, panels won't stretch to the window height! – Greendrake Aug 14 '15 at 15:27
  • Drake, could u modify my fiddle to show how this can be done with a viewport? – KavitaC Aug 14 '15 at 15:40
  • This is a great walkthrough: http://docs.sencha.com/extjs/4.2.4/#!/guide/mvc_pt1 – Tarabass Aug 14 '15 at 20:44

1 Answers1

0

Panels will not take the full available height by default. You need to use viewport for that purpose.

See example: https://fiddle.sencha.com/#fiddle/s6h

Greendrake
  • 3,657
  • 2
  • 18
  • 24