Sencha panel안에 grid 2개를 수평으로 꽉꽉 채우기

layout: 'hbox'로 수평으로 grid 집어 넣기

flex: 1로 width를 꽉꽉 채우기

height: '100%'로 height를 꽉꽉 채우기

Ext.application({
    name: 'FullScreenGrids',
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'hbox', // Horizontal layout for grids
            items: [
                {
                    xtype: 'grid',
                    title: 'Grid 1',
                    flex: 1, // Grid takes 50% of the width
                    height: '100%',
                    store: {
                        fields: ['name', 'email'],
                        data: [
                            { name: 'John Doe', email: 'john@example.com' },
                            { name: 'Jane Smith', email: 'jane@example.com' }
                        ]
                    },
                    columns: [
                        { text: 'Name', dataIndex: 'name', flex: 1 },
                        { text: 'Email', dataIndex: 'email', flex: 1 }
                    ]
                },
                {
                    xtype: 'grid',
                    title: 'Grid 2',
                    flex: 1, // Grid takes 50% of the width
                    height: '100%',
                    store: {
                        fields: ['product', 'price'],
                        data: [
                            { product: 'Product 1', price: '$10' },
                            { product: 'Product 2', price: '$20' }
                        ]
                    },
                    columns: [
                        { text: 'Product', dataIndex: 'product', flex: 1 },
                        { text: 'Price', dataIndex: 'price', flex: 1 }
                    ]
                }
            ]
        });
    }
});