Grid not displaying in window - ext js

Question

I am new to ext js. And my requirement is OnClick of a button, it calls a js function which pops up a window.Within this window I have a formPanel and a grid embedded in it. In the window items properties, if I add grid, the window is not showing. If I keep only form variable, then the window is displayed.

items : [filterPIDForm,pidGrid] is not working whereas

items: [filterPIDForm] is working fine.

Below is the code snippet

    <script type="text/javascript">
    jQuery(document).ready(function(){
    // eCube search
        jQuery('#eCubeSearch').click(function(){
        pidSearch();

        });
    });

    function pidSearch()
    {   
        var filterPIDForm = new Ext.form.FormPanel({
            title       : 'Job Filters',
            floatable   : false,
            id          : 'filterForm',
            tabTip      : 'woot',
            labelAlign  :'top',
            region      :'west',
            collapsible : true,
            bodyStyle   : 'padding: 5px; background-color: #DFE8F6',
            border      : false,
       //       style       : 'border-top: 1px solid #99BBE8;',
            width       : 220,
            items       : [
                {
                xtype           : 'combo',
                width           : 200,
                id              :'emailCombo',
                fieldLabel      :'Filter by Owner',
                valueField      :'emailValue',
                displayField    :'emailDisplay',
                mode            :'local',
                editable        :false,
                typeAhead       :false,
                triggerAction   :'all' 
            },
            {
                xtype           : 'combo',
                width           : 200,
                id              :'statusCombo',
                fieldLabel      :'Filter by Status',
                valueField      :'statusValue',
                displayField    :'statusDisplay',
                mode            :'local',
                editable        :false,
                typeAhead       :false,
                triggerAction   :'all'
                //value         :'ALL'
            },
            {
                xtype           : 'textfield',
                fieldLabel      : 'PID/Description Search',
                width           : 200,
                id              :'searchText'

            }
        ],
        buttons: [
            {
                text    : 'Clear Filter(s)',
                id      : 'clear'
            },
            {
                text    : 'Apply Filter(s)',
                id      : 'apply'
            }
        ]

        });

        var pidGrid = new Ext.grid.GridPanel({
        title               : 'Job List',   
        id                  : 'pidList',

        columns: [
                //new Ext.grid.RowNumberer(), 
                {
                    header      : 'PID',
                    width       : 70,
                    dataIndex   : 'pid',
                    sortable    : true
                },
                {

                    header      : 'Description',
                    id          : 'description',
                    dataIndex   : 'description',
                    sortable    : true
                }
                ]
    });

        var win = new Ext.Window({
        modal:true,
        title: 'PID Search',
        layout:'absolute',
        id: 'eCubeSearchWin',
        width:1000,
        height:400,
        resizable: false,
        plain: false,
        resizable: false,
        border: true,
        closeAction :'close',
        items       : [filterPIDForm,pidGrid],
        //items     : [filterPIDForm],
        buttons     : [
        {
            text    : 'OK',
            id      : 'test'
        },
        {
            text    : 'Close',
            handler  : function(){
                Ext.getCmp('eCubeSearchWin').close();
                }
        }
        ]
    });     

    win.show(); 
}
</script>

Answer 1

try setting layout in window

var win = new Ext.Window({
    renderTo : Ext.getBody(),
    width    : 500,
    height   : 500,
    layout   : 'border',
    items    : [{
                    items   : filterPIDForm
                    ,layout :'fit'
                    ,region : 'north'
                    ,height : 300
                },{
                    items   : pidGrid
                    ,layout :'fit'
                    ,region :'center'
              }]
}).show();