ExtJS 4 Render Errors On Viewport in a New Tab - extjs

Question

I am developing an extjs and spring application. I got stuck in rendering view in new tab in center region of viewport. I have not able to create an instance of the view using ref in controller. please help and let me know where i am doing wrong..
Controller js
Ext.define('Book.controller.NewBook', {
extend : 'Ext.app.Controller',
views : ['book.NewBook'],
refs : [ {
ref : 'bookViewport',
selector : 'viewport' //whatever the xtype is of your viewport class
}, { ref : 'newBookForm',
selector : '#newBook panel',
autoCreate: true//whatever the xtype is of your viewport class
} ],
init : function() {
// add the components and events we listen to
this.control({
'viewport > panel' : {
render : this.onPanelRendered
},
'viewport' : {
afterrender : this.onNewBookLinkClick
}
});
},
onNewBookLinkClick : function() {
var view = this.getBookViewport();
var newBook = this.getNewBookForm();
alert(newBook.id);
Ext.get('tab1').on('click', function() {
var tabExists = false;
var p1=Ext.getCmp('panel').getLayout();
var p2=Ext.getCmp('panel');
var items = p2.items;
for (var i = 0; i < items.length; i++) {
alert(items[i].id);
if (items[i].id === 'NewBook') {
this.getViewport().panel.setActiveTab(i);
tabExists = true;
this.getViewport().panel.setActiveTab(i);
}
}
if (!tabExists) {
p2.insert(1, newBook);
p2.setActiveTab(0);
}
});
},
onPanelRendered : function() {
}
});
View
Ext.define('Book.view.book.NewBook', {
extend : 'Ext.form.Panel',
alias : 'widget.newBook',
config: {},
constructor: function (config) {
this.initConfig(config);
return this.callParent(arguments);
},
initComponent: function () {
Ext.apply(this, {
layout : 'vbox',
contentEl : 'center2',
title : 'New Book',
store : 'Books',
id : 'NewBook',
defaults : {
bodyPadding : 10
},
items : [ {
xtype : 'panel',
width : 900,
collapsible : true,
title : 'Book Details',
defaults : {
width : 230,
cls : 'form-field'
},
defaultType : 'textfield',
items : [ {
fieldLabel : 'Book Id',
name : 'bookId',
value : '',
// validator : function(event) {
// if (!(/[0-9]/.test(this.getValue()))) {
// return "This Field should be in Numbers only";
// }
// return true;
// }
} ]
}]
});
this.callParent(arguments);
}
});
ViewPort
Ext.define('Book.view.Viewport', {
extend: 'Ext.container.Viewport',
alias : 'widget.viewport',
requires: [
'Book.view.book.catCombo',
'Book.view.book.subCatCombo',
'Book.view.book.NewBook',
'Book.view.book.BookGrid',
'Book.view.book.SearchBook',
'Book.view.book.ModifyBook'
],
id : 'borderViewPort',
layout : 'border',
items : [
Ext.create('Ext.Component', {
region : 'north',
height : 0
}),
{
region : 'west',
stateId : 'navigation-panel',
id : 'west-panel',
title : 'Navigation Menu',
split : true,
width : 200,
minWidth : 175,
maxWidth : 400,
collapsible : true,
animCollapse : true,
margins : '0 0 0 5',
layout : 'accordion',
items : [ {
contentEl : 'west',
title : '<b>Books</b>',
html : '<div id="west" class="x-hide-display"><ul> <li>New Book</li> <li>Search Book</li> </ul></div>',
iconCls : 'nav'
}, {
title : 'Purchase Order',
iconCls : 'settings'
}, {
title : 'Total Sales',
iconCls : 'info'
} ]
},
panel = Ext.create('Ext.tab.Panel', {
region : 'center',
id : 'panel',
deferredRender : false,
activeTab : 0
}) ]
});
app.js
Ext.application({
name: 'Book',
models: ['Book'],
stores: ['Books','BookCategories','BookSubCategories'],
controllers: ['NewBook', 'SearchBook'],
autoCreateViewport: true,
launch: function() {
Ext.create('Book.view.Viewport');
}
}
);

Answer 1

Your center region config is incorrect since you have defined it as panel variable, but not actually made it a child of the viewport items.
Instead, use this approach:
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
},{
region: 'west',
stateId : 'navigation-panel',
id : 'west-panel',
title : 'Navigation Menu',
split : true,
width : 200,
minWidth : 175,
maxWidth : 400,
collapsible : true,
animCollapse : true,
margins : '0 0 0 5',
layout : 'accordion',
items : [ {
contentEl : 'west',
title : '<b>Books</b>',
html : '<div id="west" class="x-hide-display"><ul> <li>New Book</li> <li>Search Book</li> </ul></div>',
iconCls : 'nav'
}, {
title : 'Purchase Order',
iconCls : 'settings'
}, {
title : 'Total Sales',
iconCls : 'info'
}]
// the west region might typically utilize a TreePanel or a Panel with Accordion layout
},{
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
items: [{
title: 'Tab 1'
},{
title: 'Tab 2'
}]
}]
});
This displays correctly, you should see how you can adapt this to your view definition.

Answer 2

The problem is solved by removing contentEl : 'center2', tag from my NewBook view.
contentEl uses the target element as its body content (the panel could still be rendered to any other element)