ExtJS 3.2 在 BorderLayout ext-comp-1004 中没有定义中心区域

Posted 2023-02-26

【中文标题】ExtJS 3.2 在 BorderLayout ext-comp-1004 中没有定义中心区域

【英文标题】：ExtJS 3.2 No center region defined in BorderLayout ext-comp-1004

【发布时间】：2017-12-19 21:39: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);

);

【问题讨论】：

正如它所说的，当您创建视口时，没有中心区域。

我尝试输入该值，得到了相同的结果。

【参考方案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'
            ]
        ]
    );
);

【讨论】：

甜蜜！谢谢！我刚刚开始使用这个框架并且一直在努力解决它。这很有帮助！！！非常感谢！