Results 1 to 2 of 2

Thread: Resize Gridpanel to fit browser window when in container layout.

  1. #1

    Default Resize Gridpanel to fit browser window when in container layout.

    I have 2 panels in the viewport. A form panel with a text field and fieldset, and a grid panel. The behavior I am looking for is to have the grid panel appear as it would if it was a panel in a fit layout, Extended to the bottom of the browser window even with the grid is empty. Is this an easy thing to do? I tried to nest the grid in another panel with a fit layout but the result did not change.

    Code:
    var store = new Ext.data.JsonStore();
    
    Ext.onReady(function() {
    	var viewport = new Ext.Viewport({
    		items: [{xtype: 'form',
    			items: [{
    				xtype: 'textfield',
    				fieldLabel: 'Search Term'
    			},{
    			xtype: 'fieldset',
    			title: 'Search Options',
    			collapsible: true,
    			collapsed: true,
    			items: [{
    				xtype: 'textfield',
    				fieldLabel: 'Term'
    			}]
    		}]
    		},{
    			xtype: 'grid',
    			id: 'grid',
    			store: store,
    			columns: [{header: 'Name'},{header: 'Address'},{header: 'Phone'},{header: 'Email'}],
    			bbar: new Ext.PagingToolbar({
    				store: store
    			}),
    			viewConfig: {
    				autoFit: true,
    				autoFill: true
    			}
    		}]
    	});
    });

  2. #2
    Sencha User
    Join Date
    Apr 2008
    Posts
    527

    Default

    use
    Code:
    layout: 'border'
    for your viewport and define regions:
    gridPanel:
    Code:
    region: 'center'
    formPanel:
    Code:
    region: 'north'

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •