PDA

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



nil5286
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.

http://jsfiddle.net/P4Mpv/1/

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

Any kind of help is appreciated.

scottmartin
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:
https://fiddle.sencha.com/#home



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'
}]
}]
});

me.callParent(arguments);
}

});

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