Extjs view rendering issue,Uncaught TypeError: Cannot read property 'tooNarrow' of undefined

Question

你好，我有以下观点，它们与 Extjs 4.1 库配合得很好，但我知道我使用的是 5.1 版本，当我尝试使用它时，它没有在 doLayout() 上正确呈现并显示未捕获类型错误：无法读取属性 'tooNarrow' 未定义。我是 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'}
        }

    ]
});

人物名单：

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

Answer 1

这里有几件事你应该做：

1 - 除非您真的知道自己在做什么，否则您不应该更改网格布局。删除设置 layout: 'border' 的行，错误就会消失。

2 - tbar 没有进入 dockedItems 配置。

3 - autoScroll 配置现在称为 scrollable，默认设置为 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'
    }]
});

Extjs view rendering issue,Uncaught TypeError: Cannot read property 'tooNarrow' of undefined

Extjs view rendering issue,Uncaught TypeError: Cannot read property 'tooNarrow' of undefined

javascript

extjs

extjs4

extjs5