ExtJS 3.2 BorderLayout ext-comp-1004 中未定义中心区域

Question

我在尝试加载以下视口时遇到错误。我搜索的所有内容都表明我没有在我的表单面板中定义区域，但是我有。

Ext.onReady(function () {        
   
   var viewport = new Ext.Viewport({
        layout: 'border',
        items: []
    });
   
    var panel = new CR.FormPanel({
         region: 'center',
         title: 'Center Panel',
         frame: true         
    });
    
    viewport.add(panel);

});

Answer 1

在ExtJS 3.2 docs, here is link for viewport and BorderLayout.

在此FIDDLE, I have create a demo using viewport with border layout. I hope this FIDDLE中将帮助您实现您的要求。

代码段

Ext.onReady(function() {
    var viewPort = new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">Page Title</h1>',
            autoHeight: true,
            border: false,
            margins: '0 0 5 0'
        }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            width: 200
            // the west region might typically utilize a TreePanel or a Panel with Accordion layout
        }, {
            region: 'south',
            title: 'Title for Panel',
            collapsible: true,
            html: 'Information goes here',
            split: true,
            height: 100,
            minHeight: 100
        }, {
            region: 'east',
            title: 'Title for the Grid Panel',
            collapsible: true,
            split: true,
            width: 300,
            xtype: 'grid',
            store: new Ext.data.ArrayStore({
                fields: [{
                    name: 'company'
                }, {
                    name: 'price',
                    type: 'float'
                }, {
                    name: 'change',
                    type: 'float'
                }],
                data: [
                    ['3m Co', 71.72, 0.02],
                    ['Alcoa Inc', 29.01, 0.42],
                    ['Altria Group Inc', 83.81]
                ]
            }),
            columns: [{
                id: 'company',
                header: 'Company',
                sortable: true,
                dataIndex: 'company'
            }, {
                header: 'Price',
                sortable: true,
                dataIndex: 'price'
            }, {
                header: 'Change',
                sortable: true,
                dataIndex: 'change'
            }]
        }, {
            region: 'center',
            xtype: 'tabpanel', // TabPanel itself has no title
            activeTab: 0,
            items: [{
                title: 'Default Tab',
                html: 'The first tab\'s content. Others may be added dynamically'
            }, {
                title: 'Tab 2',
                html: 'The 2nd tab\'s content. Others may be added dynamically'
            }]
        }]
    });
});

ExtJS 3.2 BorderLayout ext-comp-1004 中未定义中心区域

ExtJS 3.2 No center region defined in BorderLayout ext-comp-1004

javascript

extjs

extjs3