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

      0  

    Default 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,334
    Vote Rating
    87
    sword-it is just really nice sword-it is just really nice sword-it is just really nice sword-it is just really nice

      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
    35
    Vote Rating
    1
    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,251
    Vote Rating
    485
    scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute

      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
    1
    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.