ExtJS : How to position Grid Panels

1
votes

I have been trying for a quite a while to place multiple Ext.grid.Panel(s) on a single screen. I want to place them in certain positions. But somehow either they are relatively getting inclined, or overlapping or sometimes I don't see one of the panels at all. I tried with various things like layout:column, layout:absolute etc.

Please suggest how can I position my grids on a single page. I am trying to place 4 Grid Panels in two rows with decent space between each grid.Panel.

1
extjs

1 Answers

4
votes
Ext.require('*');

Ext.onReady(function(){

    new Ext.container.Viewport({
        layout: 'absolute',
        defaults: {
            width: 200,
            height: 200
        },
        items: [{
            title: 'Grid1',
            x: 20,
            y: 20,
        }, {
            title: 'Grid2',
            x: 300,
            y: 20
        }, {
            title: 'Grid3',
            x: 20,
            y: 700
        }, {
            title: 'Grid4',
            x: 500,
            y: 800
        }]
    });

});