Question

I have a grid with data, contained in a panel which also hold a title and a smaller summary grid.
the panel has layout fit and therefore the title and first grid, which is the summary grid, are displayed just fine. But the grid in question has more records than can be shown on the screen and its component height is not adjusted to the size of the panel which always fits with the height of the browser window.

What I would like to have is that the grid component’s height, like the panel, is adjusted to its parent so that the scrollbar inside the grid body will show up.

My code is similar to this (initComponent is of an extension to Ext.panel.Panel):
(header in this code means the summary grid)

initComponent: function (config) {
    var config = {
        border: false,
        hidden: false,
        hideMode: "display",
        padding: '5',
        layout: "fit"
    }

    Ext.apply(this, Ext.apply(this.initialConfig, config));
    this.callParent(arguments);

    title = Ext.create("Ext.panel.Panel", {
        html: '<h2>title</h2>',
        padding: '5',
        border: false
    });

// the stores for the grids are created here
    var storeHdr = DataStoreFactory.CreateStore("GetHeaderP", DataStoreFactory.fieldsCollection.Default);
    var storeBdy = DataStoreFactory.CreateStore("GetBodyP", DataStoreFactory.fieldsCollection.Default);

    var grdHeader = Ext.create("Ext.grid.Panel", {
        store: storeHdr,
        columns: getHeaderColumns(), 
        columnLines: true,
        autoHeight: false,
        autoWidth: false,
        enableHdMenu: false,
        enableColumnMove: false,
        enableColumnResize: false,
        disableSelection: true,
        trackMouseOver: false,
        sortable: false
    });

    var grdBody = Ext.create("Ext.grid.Panel", {
        id: id,
        store: storeBdy,
        columns: getBodyColumns(), 
        columnLines: true,
        autoHeight: false,
        autoWidth: false,
        autoScroll: true,
        scroll: "vertical",
        enableColumnMove: false,
        enableColumnResize: false,
        enableHdMenu: false,
        trackMouseOver: false,
        disableSelection: true
    });
},

    var headerGridContainer = Ext.create("Ext.panel.Panel", {
        layout: "fit",
        border: false,
        items: [grdHeader]
    });
    var bodyGridContainer = Ext.create("Ext.panel.Panel", {
        layout: "fit",
        border: false,
        items: [grdBody]
    });

    this.add(title);
    this.add(headerGridContainer);
    this.add(bodyGridContainer);
    storeHdr.load();
    storeBdy.load();
    this.doLayout();
}

I hope someone can help me with this. Thanks in advance

edit – screenshots how it is and how it should be. Realtime Data is removed or blotted out, since it is private and doesn’t matter for the problem.

this is how it is

this is how it should be

Answer 1

You’re using layouts in a wrong way. First, your main container has layout ‘fit’ which supposed to be used when you have single item inside – http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Fit – and you have few items.

Second, try to avoid over-nesting. You’re wrapping your grids into panels and then put these panels inside container. Is there a reason for that?

Please post a screenshot of what you have and what you want to have and we will help you figure out layouts that you need to use for this.

Update:

Try to use layout: 'hbox' in your main container. And specify flex: 1 for the main (bottom) grid if you want it to fill the rest of the screen. Son basically you would have something simliar to this (in you main container):

{
   layout: 'hbox',
   ..
   items: [{
      xtype: 'panel', // header
      height: 100, 
   },
   {
      xtype: 'grid', // first grid
      height: 200
   },
   {
      xtype: 'grid', // second grid
      flex: 1
   }]
}