View Full Version : Grid in subcontainer having layout anchor should adhere and occupy full screen

18 Jun 2014, 11:53 AM
I am trying to fit the grid which is in a subcontainer with layout as anchor and flex 1 as it is part of main container with layout as vbox, should occupy the remaining of the screen.

To explain the exact structure attached is the jsfiddle link.


As we can see there is a space below the grid.

Any kind of help is appreciated.

18 Jun 2014, 3:35 PM
You have a lot of over nested and un-needed settings. See the following for example:

You can run this code in our fiddle:

Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.container.Container',

// provide temp width for lack of grid data
height: 400,
width: 800,

layout: {
type: 'vbox',
align: 'stretch'

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [{
xtype: 'form',
height: 120,
bodyPadding: 10,
title: 'My Form'
}, {
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}, {
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'MyButton'



Ext.onReady(function() {
Ext.create('MyApp.view.MyContainer', {
renderTo: Ext.getBody()