Extjs 网格未在窗口中显示-ext js

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

项：[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>

jQuery（文档）.ready（函数（）{
//eCube搜索
jQuery（“#eCubeSearch”）。单击（函数（）{
pidSearch（）；
});
});
函数pidSearch（）
{   
var filterPIDForm=new Ext.form.FormPanel({
标题：“作业筛选器”，
浮动：错误，
id:'过滤性能'，
标签提示：“呜呜”，
labelAlign:“顶部”，
地区：'西部'，
可折叠的：是的，
bodyStyle:'填充：5px；背景色：#DFE8F6'，
边界：错，
//样式：“边框顶部：1px实心#99BBE8；”，
宽度：220，
项目：[
{
xtype:'组合'，
宽度：200，
id:'emailCombo'，
fieldLabel:“按所有者筛选”，
valueField:'emailValue'，
显示字段：'emailDisplay'，
模式：'本地'，
可编辑：false，
typeAhead:false，
触发动作：“全部”
},
{
xtype:'组合'，
宽度：200，
id:'statusCombo'，
fieldLabel:“按状态筛选”，
valueField:'statusValue'，
显示字段：'statusDisplay'，
模式：'本地'，
可编辑：false，
typeAhead:false，
触发动作：“全部”
//值：'ALL'
},
{
xtype:'textfield'，
fieldLabel:“PID/描述搜索”，
宽度：200，
id:'searchText'
}
],
按钮：[
{
文本：“清除过滤器”，
id:'清除'
},
{
文本：“应用过滤器”，
id:“申请”
}
]
});
var pidGrid=new Ext.grid.GridPanel({
标题：“工作清单”，
id:'pidList'，
栏目：[
//新建Ext.grid.RowNumberer（），
{
标题：“PID”，
宽度：70，
数据索引：“pid”，
可排序：正确
},
{
标题：“说明”，
id:'说明'，
数据索引：“说明”，
可排序：正确
}
]
});
var win=新的外部窗口({
莫代尔：是的，
标题：“PID搜索”，
布局：'绝对'，
id:“eCubeSearchWin”，
宽度：1000，
身高：400，
可调整大小：false，
简单地说：错，
可调整大小：false，
边界：是的，
closeAction:“close”，
items:[filterPIDForm，pidGrid]，
//项目：[filterPIDForm]，
按钮：[
{
文本：“OK”，
id:'测试'
},
{
文本：“关闭”，
处理程序：函数（）{
Ext.getCmp（'eCubeSearchWin'）.close（）；
}
}
]
});     
win.show（）；
}

尝试在窗口中设置布局

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

---

尝试在窗口中设置布局

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

---

非常感谢您的回复。现在网格的一部分正在显示。现在它的显示窗体面板在左侧，网格在底部。实际上，我想要这样的结构。在窗口内，表单面板在左侧，表单面板底部有两个按钮，网格在右侧（与表单面板相邻）。希望您理解我的要求，所以将网格区域设置为“中心”，表单设置为“西”，并确保其具有宽度（无高度）.我给出了这些设置..但它仍然不工作：[{items:filterPIDForm，region:'west'，width:220}，{items:pidGrid，region:'center'}]非常感谢您的回复..现在网格的一部分正在显示..现在它的显示窗体面板在左侧，网格在底部。实际上，我想要这样的结构。在窗口内，表单面板在左侧，表单面板底部有两个按钮，网格在右侧（与表单面板相邻）。希望您理解我的要求，所以将网格区域设置为“中心”，表单设置为“西”，并确保其具有宽度（无高度）.I给出了这些设置..但它仍然不是工作项：[{items:filterPIDForm，region:'west'，width:220}，{items:pidGrid，region:'center'}]