1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    34
    Vote Rating
    0
    parasharsh is on a distinguished road

      0  

    Default Grid panel inside div

    Grid panel inside div


    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.

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    try layout:fit
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    34
    Vote Rating
    0
    parasharsh is on a distinguished road

      0  

    Default


    I have already tried all the possible layout options.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this is what you are looking for:

    Code:
    // 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.

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Estonia
    Posts
    198
    Vote Rating
    0
    mmuruev is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    See if this is what you are looking for:

    Code:
    // 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.