Extjs查看渲染问题，Uncaught TypeError：无法读取未定义的属性'tooNarrow'

Question

Hello I have thr following view and they worked well with Extjs 4.1 library but know I use 5.1 version and when I am trying use it, it is not rendering pproperly on doLayout() and show Uncaught TypeError: Cannot read property 'tooNarrow' of undefined. I am newbie in Extjs maybe in 5.1 library has different options that I dont know?Please help
Fist I am trying to load PersonPanelView:

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'}
        }

    ]
});

PersonList:

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

PersonStore:

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

PersonModel:

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

Answer 1

A few things you should do here:

1 - Unless you really know what you are doing, you should not be changing the grid layout. Remove the line where you set layout: 'border' and the error will go away.

2 - The tbar does not go inside the dockedItems config.

3 - The autoScroll config is called scrollable now, and it is set to true by default.

This is what your Grid should look like:

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