网格没有显示在window-ext js中

Question

我是ext-js的新手。我的要求是点击一个按钮，它调用一个弹出窗口的js函数。在这个窗口中，我有一个formPanel和一个嵌入其中的网格。在窗口项属性中，如果我添加网格，则窗口不会显示。如果我只保留形式变量，则显示窗口。

items : [filterPIDForm,pidGrid]不工作，而

items: [filterPIDForm]运行良好。

以下是的代码片段

    <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

尝试在窗口中设置布局

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();