Grid panel inside div

[parasharsh]

I have a html page with div .
I would like my grid panel to render inside this div taking full height and width of the div (100%).
I tried various layouts but still the grid do not take 100% of the container div.

[sword-it]

try layout:fit

[parasharsh]

I have already tried all the possible layout options.

[scottmartin]

See if this is what you are looking for:

// sample static data for the store
var myData = [
	['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
	['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
	['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
	['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
	['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
	['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
];

Company = Ext.extend(Ext.data.Model, {
	fields: [
	   {name: 'company'},
	   {name: 'price',      type: 'float'},
	   {name: 'change',     type: 'float'},
	   {name: 'pctChange',  type: 'float'},
	   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
	],
	idProperty: 'company'
});

// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
	model: Company,
	data: myData
});

Ext.onReady(function(){
	var grid = Ext.create('Ext.grid.Panel', {
		store: store,
		multiSelect: true,
		columns: [
			{
				text     : 'Company',
				flex     : 1,
				sortable : false,
				dataIndex: 'company'
			},
			{
				text     : 'Price',
				width    : 75,
				sortable : true,
				renderer : 'usMoney',
				dataIndex: 'price'
			},
			{
				text     : 'Change',
				width    : 75,
				sortable : true,
				dataIndex: 'change'
			},
			{
				text     : '% Change',
				width    : 75,
				sortable : true,
				dataIndex: 'pctChange'
			},
			{
				text     : 'Last Updated',
				width    : 85,
				sortable : true,
				renderer : Ext.util.Format.dateRenderer('m/d/Y'),
				dataIndex: 'lastChange'
			}
		],
		//height: 350,
		// width: 600,
		title: 'Array Grid',
		renderTo: 'gridDiv',
		viewConfig: {
			stripeRows: true
			//enableTextSelection: true
		}
	});

    // track browser resize
    Ext.EventManager.onWindowResize(grid.doLayout, grid);
});

Regards,
Scott.

[mmuruev]

See if this is what you are looking for:

// sample static data for the store
var myData = [
    ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
    ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
    ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
    ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
    ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
    ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
];

Company = Ext.extend(Ext.data.Model, {
    fields: [
       {name: 'company'},
       {name: 'price',      type: 'float'},
       {name: 'change',     type: 'float'},
       {name: 'pctChange',  type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ],
    idProperty: 'company'
});

// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
    model: Company,
    data: myData
});

Ext.onReady(function(){
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        multiSelect: true,
        columns: [
            {
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company'
            },
            {
                text     : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                text     : 'Change',
                width    : 75,
                sortable : true,
                dataIndex: 'change'
            },
            {
                text     : '% Change',
                width    : 75,
                sortable : true,
                dataIndex: 'pctChange'
            },
            {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            }
        ],
        //height: 350,
        // width: 600,
        title: 'Array Grid',
        renderTo: 'gridDiv',
        viewConfig: {
            stripeRows: true
            //enableTextSelection: true
        }
    });

    // track browser resize
    Ext.EventManager.onWindowResize(grid.doLayout, grid);
});

Regards,
Scott.

I have the same problem. This code is working but not better then autoHeight. Grid have height as much as rows inside but not fill all space. ViewPort not good also because I have another elements on a page.