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'
]
});
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'
]
});
1 Answer
Reset to default 6A 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'
}]
});