form Panel layout issue in extjs2

I am new to extjs layouts. I have a Form panel with default layout.I am adding a fieldset which contains a grid and two buttons. I am rendering a form Panel to div.

Div in JSP

<div id="mydiv"></div>

FormPanel in JS

var fp = new Ext.FormPanel(
                {
                    standardSubmit :true,
                    id :'panel',
                    autoHeight :true,
                    layout: 'border',
                    bodyCfg: { cls: 'template' },
                    bodyPadding :10,
                    margin :'0 0 20',
                    frame :'true',
                    renderTo :'mydiv',
                    buttonAlign:'right',
                   items : [topPanel , fieldset ]
   });

I want the form and grid to be resized as per window size (resizing of the window shold resize the element) Right now If try I to resize the window, fieldset is getting resized as per window but grid is not.

I have given a fixed height and width to grid for now. As without that grid just expand horizontally.

I dont want to give any height width to panel , grid. How can it be achieved? As I searched if we render panel to viewport , it will take care of resizing. If this is so , then should I create a viewport in extjs and reneder that to div? If yes then how to do that?

Edit: Or I have to use css with div?

Any 开发者_C百科pointers are appreciated. Thanks

You can create a viewport and this will as you say, take care of the resizing.

Within the viewport, you can then add your panel the 'items' collection. If you want the panel to fit the viewport, you should use the 'fit' layout.

Something along these lines would be the right type of idea:

var viewPort = new Ext.Viewport({
    id: "blaa",
    items: [fp],
    layout: "fit"
)};

I've not checked the syntax here, but you get the idea.

Use anchor property. E.g.: anchor: '-10'on whichever components you want this feature on. This will automatically adjust the width of the component according to it's parents width.

So if your formpanel is of width 100px, any child component which has anchor : '-10px' set, will have width widthOfParent - anchorWidth

You can also set the layout to fit. This will automatically expand all child components to width of their parents.