代码之家 › 专栏 › 技术社区 › user3183411

ExtJS 3.2边界布局ext-comp-1004中未定义中心区域

extjs3 extjs javascript

user3183411 · 技术社区 · 7 年前

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

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 回复 | 直到 7 年前

Narendra Jadhav 7 年前

在里面 ExtJS 3.2 文档 ,这里是的链接 viewport 和 BorderLayout .

在这个 FIDDLE ,我创建了一个演示使用 “视口” 具有 border 布局我希望这样 小提琴 将帮助您实现您的要求。

代码段

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