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

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

  •  0
  • 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 年前
        1
  •  0
  •   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'
                }]
            }]
        });
    });