Extjs4 extjs 4.0.0中边框布局中的网格？

在extjs版本4.0.0中，如何将网格与表单一起放置在边框布局的中心区域中。我能把表格放在一起，但不能把网格放在一起

源代码：-

Ext.onReady(function() {

    var viewport = Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: 'border',
        items: [{
            region: 'west',
            width: 200,
            collapsible: true,
            collapsed: true,
            html: 'West Region'
        }, {
            region: 'center'
        }, {
            region: 'east',
            width: 200,
            collapsible: true,
            collapsed: true,
            html: 'East Region'
        }, {
            region: 'south',
            height: 50,
            html: 'South Region'
        }]
    });

    var form = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: 'User Form',
        height: 130,
        align: 'center',
        width: 280,
        bodyPadding: 10,
        defaultType: 'textfield',
        items: [
            {
                fieldLabel: 'First Name',
                name: 'firstName'
            },
            {
                fieldLabel: 'Last Name',
                name: 'lastName'
            }
        ],

        buttons: [{
            text: 'Submit',
            handler    : function () { alert("successfully submitted");}
        }]

});
    viewport.layout.regions.center.add(form);
    // using add()
    form.show()

    });

---

请帮助我在extjs 4.0.0中边框布局的中心区域的窗体下方放置一个网格。您应该将窗体和网格包含在中心面板的项目中，并设置适当的布局。

您不能将组件添加到边框布局区域。如果要向视口中心区域添加多个组件，则必须使用包装器组件

文件第段：

BorderLayout的区域在渲染时和渲染后固定， 不能删除或添加其子组件。要添加/删除 BorderLayout中的组件，使用附加的 由BorderLayout直接管理的容器。如果该地区 是可折叠的，BorderLayout直接使用的容器 经理应该是一个小组

---

而不是添加一个表单 创建表单和网格并立即添加它们

试试这个：

var bothforms = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 600,
    layout: 'column',//or whetever u want
    items [{
    title: 'User Form',
    columnWidth: .5,
    border: false,
    height: 130,
    align: 'center',
    width: 280,
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [... ]
   },{
    title : 'User Grid',
    columnWidth: .5,
    border: false,
    height: 130,
    width: 300,
    items: [... ]
}]

});
viewport.layout.regions.center.add(bothforms);
// using add()
bothforms.show()

---

我试着这样做，但没有得到理想的输出。事实上，屏幕上全是空白。你能给我一些代码吗？？提前感谢。事实上，我是extjs新手。如果你能给我提供一些示例代码或说明，那就太好了。谢谢OP没有向边框布局区域添加新区域（这是不受支持的），OP正在向已经位于中心区域的面板添加新区域。感谢您为我提供代码。但很抱歉，它仍然不起作用…：（不工作对我来说不是一个很好的描述来帮助你。这段代码在我的应用程序上有效，你一定做得不对。使用FF来了解错误。

var bothforms = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 600,
    layout: 'column',//or whetever u want
    items [{
    title: 'User Form',
    columnWidth: .5,
    border: false,
    height: 130,
    align: 'center',
    width: 280,
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [... ]
   },{
    title : 'User Grid',
    columnWidth: .5,
    border: false,
    height: 130,
    width: 300,
    items: [... ]
}]

});
viewport.layout.regions.center.add(bothforms);
// using add()
bothforms.show()