Extjs查看渲染問題，Uncaught TypeError：無法讀取未定義的屬性'tooNarrow'

Question

您好我有以下視圖，他們與Extjs 4.1庫工作得很好，但知道我使用5.1版本，當我嘗試使用它時，它不會在doLayout（）上顯示pproperly並顯示Uncaught TypeError：無法讀取屬性'tooNarrow'的undefined 。 我是Extjs的新手也許在5.1庫中有不同的選項，我不知道？請幫忙
拳頭我正在嘗試加載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

你應該在這里做一些事情：

1 - 除非你真的知道自己在做什么，否則你不應該改變網格布局。 刪除設置layout: 'border'的行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'
    }]
});