Question

尝试加载以下视图端口时出错。我搜索的所有内容都表明我没有在表单面板中定义任何区域，但是，我这样做。

＆＃13;

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

＆＃13;

Answer 1

在 ExtJS 3.2文档中，此处为viewport和BorderLayout的链接。

在此 FIDDLE 中，我使用带有viewport布局的border创建了一个演示。我希望 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中没有定义中心区域

1 个答案: