Javascript Extjs视图呈现问题，未捕获类型错误：无法读取属性'；太窄'；未定义的

您好，我有以下视图，它们与Extjs 4.1库配合得很好，但我知道我使用的是5.1版本，当我尝试使用它时，它在doLayout（）上的渲染不正确，并显示未捕获的TypeError:无法读取未定义的属性“TooNearow”。我是Extjs的新手，也许5.1库中有我不知道的不同选项？请帮助
首先，我尝试加载PersonPanelView：

Ext.define('Pandora.view.Person.PersonPanelView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.PersonPanel',
    layout: 'hbox',

    items:[
        {
            flex:1.8,
            xtype:'PersonList',
            height:'100%',
            title:'List of persons'
        },
        {
            flex:3,
            height:'100%',
            xtype:'panel',
            id:'personProfileId',
            autoScroll:true,
            title:'Person profile',
            //frame:true,
            bodyStyle:{background: '#99bce8'}
        }

    ]
});

PersonPanelView：

Ext.define('Pandora.view.Person.PersonPanelView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.PersonPanel',
    layout: 'hbox',

    items:[
        {
            flex:1.8,
            xtype:'PersonList',
            height:'100%',
            title:'List of persons'
        },
        {
            flex:3,
            height:'100%',
            xtype:'panel',
            id:'personProfileId',
            autoScroll:true,
            title:'Person profile',
            //frame:true,
            bodyStyle:{background: '#99bce8'}
        }

    ]
});

个人列表：

Ext.define('Pandora.view.Person.PersonListView', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.PersonList',
    layout: 'border',
    title: 'Person',
    store: 'Person.PersonStore',
    autoScroll:true,
    dockedItems:[
        {
            tbar:[
                { xtype:'button', text:'Add Person',name:'addPerson'        },'-',
                { xtype:'button', text:'Edit Person',name:'editPerson'      },'-',
                { xtype:'button', text:'Remove Person',name:'removePerson'  },'-',
                { xtype:'button', text:'Add Conference',name:'addConference'},'-',
                { xtype:'button', text:'Add Event',name:'addEvent'}
            ]
        }
    ],
    columns: [
        { text: 'Login',  dataIndex: 'login' , flex:1,align:'center'},//
        { text: 'Name', dataIndex: 'name', flex:1,align:'center'},
        { text: 'Surname', dataIndex: 'surname', flex:1,align:'center'},
    ]
});

个人商店：

Ext.define('Pandora.store.Person.PersonStore', {
    extend: 'Ext.data.Store',
    model: 'Pandora.model.Person.PersonModel',
    autoLoad:true,
    proxy: {
        type: 'ajax',
        url: 'do/person/getAllPersons'
    }
});

人物模型：

Ext.define('Pandora.model.Person.PersonModel', {
    extend: 'Ext.data.Model',
    fields: [
        'id',
        'login',
        'password',
        'email',
        'name',
        'avatar',
        'surname',
        'relationship',
        'phoneNumber',
        'gender',
        'country',
        'city',
        'school',
        'university',
        'persons',        
        'conferences',        
        'images',        
        'requests',        
        'followers',        
        {name:'posts',type:'auto'},
        'dateOfBirth'
    ]
});

---

在这里，您应该做几件事：

1-除非你真的知道你在做什么，否则你不应该改变网格布局。删除设置

layout:'border'

的行，错误就会消失

2.

tbar

未进入dockedItems配置

3-autoScroll配置现在称为可滚动配置，默认设置为true

这是网格的外观：

Ext.define('Pandora.view.Person.PersonListView', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.PersonList',
    title: 'Person',
    store: Ext.create('Pandora.store.Person.PersonStore'),

    tbar:[
        { xtype:'button', text:'Add Person',name:'addPerson'        },'-',
        { xtype:'button', text:'Edit Person',name:'editPerson'      },'-',
        { xtype:'button', text:'Remove Person',name:'removePerson'  },'-',
        { xtype:'button', text:'Add Conference',name:'addConference'},'-',
        { xtype:'button', text:'Add Event',name:'addEvent'}
    ],
    columns: [{ 
        text: 'Login',  dataIndex: 'login' , flex:1,align:'center'
    },{ 
        text: 'Name', dataIndex: 'name', flex:1,align:'center'
    },{ 
        text: 'Surname', dataIndex: 'surname', flex:1,align:'center'
    }]
});

---

为什么我不能在这里使用边框布局？因为您不想在网格中添加其他面板，您可能需要创建一个带有边框布局的面板，然后将网格添加到其中。