PDA

View Full Version : Custom xtype is not displayed in ViewPort



sridhar.boganathan
20 Mar 2012, 6:41 AM
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
20 Mar 2012, 6:49 AM
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
20 Mar 2012, 7:53 AM
Can you post definition of studentlist?

sridhar.boganathan
20 Mar 2012, 10:22 PM
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
}
]
});