Ext.js 6.2.1 modern: Grid inside container doesn't display data

[engineer4]

Whe you put a grid into a container (for example to combine it with another component), it doesn't show any data in the modern toolkit.

Ext.js version: 6.2.1.167 modern
Tested on: Firefox 51.0.1 (32 bit), Microsoft Edge 38.14393.0.0

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1rdk

Click on the Grid panel to see the expected behaviour, then switch to the Container panel to see the bug.

[darkorigins]

Hi engineer4

Been caught by this one myself ... the data's there, just the grid dimensions collapse. Adding a width & height reveals your data.

https://fiddle.sencha.com/#view/editor&fiddle/1rnu

Also fixable by adding something like

layout: 'fit'

to the container

There's also a small typo in there,

{ name: 'data', type: 'text' }

should be

{ name: 'data', type: 'string' }

Mark

[mattia.pagliasso]

Same problem here:
https://fiddle.sencha.com/#view/editor&fiddle/1qk7

If we uncomment the row 194 the grid will apear, but we need a dinamic height that will show all the records .

If we add layout: 'fit' (row 35) to the parent container, the grid will occupy all the space and will become scrollable ; but ,for our project, the container should be scrollable and not the grid.

[fmoseley]

This is not considered to be a bug.
We recommend that you always add a layout to any container.
The issue is that you are not giving the grid any sizing direction.
It is necessary for the grid to display properly.
That is why it works once you add a layout or height and width to the grid.

[mattia.pagliasso]

This is not considered to be a bug.
We recommend that you always add a layout to any container.
The issue is that you are not giving the grid any sizing direction.
It is necessary for the grid to display properly.
That is why it works once you add a layout or height and width to the grid.

So..according to your observation...let's suppose that i want the page to grow accordingly to grid's data (the grid should never scroll) . How is possible to achieve this with modern ? (with classic it's working)

P.S: keep in mind that in a multi devices context (which should be what modern is made for) it's impossibile to define the size in pixel of an UI element at coding time. this kind of approach will result in a good result on some devices and an awful result in some other devices

[fmoseley]

We can address this issue on the ticket you opened.

So..according to your observation...let's suppose that i want the page to grow accordingly to grid's data (the grid should never scroll) . How is possible to achieve this with modern ? (with classic it's working)

P.S: keep in mind that in a multi devices context (which should be what modern is made for) it's impossibile to define the size in pixel of an UI element at coding time. this kind of approach will result in a good result on some devices and an awful result in some other devices

[aallord]

This is not considered to be a bug.
We recommend that you always add a layout to any container.
The issue is that you are not giving the grid any sizing direction.
It is necessary for the grid to display properly.
That is why it works once you add a layout or height and width to the grid.

This "feature" as stated above still exists in Ext JS 6.6 Modern. It is NOT a feature based on several logical thoughts in development.

1. Grid Panels are NOT layout panels. Ergo, not often will I ever have a grid panel displayed alone without presenting other/more detailed information to the end user.
2. Panels are considered layout panels whereby I will be adding more items to it to display information to the end user. Ergo, I will be adding a "Grid Panel" to this panel... But not in Modern as data doesn't display.

It would be my hope this is considered a MAJOR bug and would be addressed considering the toolkit roadmap confusion existing in with Sencha MVP's. It are these so deemed "features" being a primary reason I cannot use Sencha Architect as I continue hand coding to develop universal applications. Ones specifically designed for mobile and a browser experience. This is NOT acceptable in the browser world and from comments here this is NOT acceptable in a Modern toolkit.

[radej7]

I try add layout: 'fit' in to container in this fiddle and it working.
https://fiddle.sencha.com/#view/editor&fiddle/1rdk

var mainView = Ext.create('Ext.tab.Panel', {
activeItem: 0,
items: [
{
title: 'Grid',
xtype: 'grid',
margin: 20,

store: store,

columns: [
{text: 'ID', dataIndex: 'id'},
{text: 'Data', dataIndex: 'data'}
]
},
{
title: 'Container',
xtype: 'container',
margin: 20,
layout: 'fit',

items: [
{
title: 'Grid',
xtype: 'grid',

store: store,

columns: [
{ text: 'ID', dataIndex: 'id' },
{ text: 'Data', dataIndex: 'data' }
]
}
]
}
]
}).show();