Custom xtype is not displayed in ViewPort

[sridhar.boganathan]

Hi All,

I have defined my own widgets <widget.studenlist> and <widget.studentdetails>; I have defined these two widget as views; I have given these the views config properties of each controllers and I have configured these 'studentlist' and 'studentdetails' as items in tab panel which is in view port of my application.

But, these views are not displayed and no errors. Added, these views don't have any store / model.

This is my app.js


Ext.application({
name: 'poc',

appFolder: 'app',

controllers: [
'StudentList',
'StudentDetails'
],

launch: function() {
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'tabpanel',
flex: 1,
items: [{xtype: 'studentlist'}]
},
{xtype: 'splitter'},
{
xtype: 'tabpanel',
flex: 1,
items: [{xtype: 'studentdetails'}]
}
]
});
}
});


Please let me know what I am wrong.

[vietits]

Check your code to make sure you have loaded respective view classes. You can do this by using requires config or by views config in your controllers.

[khmurach]

Can you post definition of studentlist?

[sridhar.boganathan]

Thanks, I found the issue. I didn't give 'view' in-between 'poc' and 'StudentList'. Now it is working fine.

I am confused since Ext JS didn't raise any error for this.



Ext.define(poc.view.StudentList',{
extend: 'Ext.container.Container',
alias: 'widget.studentlist',
layout:{
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items:[
{
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'tabpanel',
id: 'list',
flex: 1
},
{
xtype: 'splitter'
},
{
xtype: 'tabpanel',
id: 'details',
flex: 2
}
], flex: 2
}
]
});