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

Question

I'm getting an error when attempting to load the following view port. Everything I have search states that I have no region defined in my form panel however, I do.

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

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

In this FIDDLE, I have create a demo using viewport with border layout. I hope this FIDDLE will help you to achieve your requirement.

Code Snippet

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'
            }]
        }]
    });
});