CODEWITHSUNDEEP
extjsextjs6
freento
freento

Reputation: 2949

ExtJS panel does not load grid content inside

I'm not sure why, but ExtJS does not display content of grid if it is in regular Panel.

When I add grid to tab.Panel then all is fine.

Fiddle (with multiple files): https://fiddle.sencha.com/?fiddle=19bi#fiddle/19bi

Check that Home Tab has grid. It does not use Ext.Panel. Users tab uses and no grids are displaying.

Files in my project:

Simple store (app\store\Personnel.js)

My Panel with 1 item. When I change Ext.tab.Panel to Ext.Panel then grid content does not show (modern\src\view\main\Main.js)

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    ...

    items: [
    {
        title: 'Home',
        iconCls: 'x-fa fa-home',
        layout: 'fit',
        // The following grid shares a store with the classic version's grid as well!
        items: [{
            xtype: 'mainlist'
        }]
    }
]
});

Item itself (myapp\modern\src\view\main\List.js):

Ext.define('MyApp.view.main.List', {
    extend: 'Ext.grid.Grid',
    xtype: 'mainlist',

    requires: [
        'MyApp.store.Personnel'
    ],

    title: 'Personnel',

    store: {
        type: 'personnel'
    },

    ...
});

Upvotes: 0

Views: 2710

Answers (1)

Alexander
Alexander

Reputation: 20244

The issue is with the layout.

This shows the contents:

/**
 * This view is an example list of people.
 */
Ext.define('MyApp.view.main.Users', {
    extend: 'Ext.Panel',
    layout:'vbox',
    xtype: 'users',

    items: [{
        xtype: 'usersgrid',
        flex:1
    },{
        xtype: 'usersgrid',
        flex:1
    }]
});

As far as I know, a grid cannot force the view to take the height of all rows. Instead, the view is either too big or too small. In the first case, there is white space below the rows, in the second case, the grid is scrollable.

Upvotes: 1

Related Questions