load grid panel into content panel - extjs

Question

I try to understand the basics of the extjs MVC.
I created the example app with the Sencha CMD. This comes with some basic things. What i try to make is a panel with a toolbar where i have a menu. When i click on a item in the menu i want to load a grid into the panel.
What function do i need to do this?
This is my mainmodel
Ext.define('JustRent.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'JustRent.view.main.MainController',
'JustRent.view.main.MainModel',
'JustRent.view.main.ProductenType'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
region: 'center',
id: 'contentBlock',
xtype: 'panel',
layout: 'fit',
title: 'JustRental',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Menu',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'verhuur',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Offertes',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
},{
xtype: 'menuitem',
text: 'Nieuwe offerte'
},{
xtype: 'menuitem',
text: 'Openstaande offertes'
},{
xtype: 'menuitem',
text: 'Geannuleerde offertes'
}]
}
}, {
xtype: 'menuitem',
text: 'Projecten',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
}]
}
}, {
xtype: 'menuitem',
text: 'Producten',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
},{
xtype: 'menuitem',
text: 'Artikelen'
},{
xtype: 'menuitem',
text: 'Groepen'
},{
xtype: 'menuitem',
text: 'Type',
handler: 'onClickButton',
},{
xtype: 'menuitem',
text: 'Soort'
},{
xtype: 'menuitem',
text: 'Merk'
}]
}
}, {
xtype: 'menuitem',
text: 'Klanten'
}]
}
},
{
xtype: 'menuitem',
text: 'verkoop'
}
]
}
}]
}]
}
]
});
when i click on an item i use a basic handler. This is located in my mainController file:
Ext.define('JustRent.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
],
alias: 'controller.main',
onClickButton: function () {
console.log('click works');
}
});
this is my ProductenType
Ext.define('JustRent.view.main.ProductenType', {
extend: 'Ext.grid.Panel',
alias: 'widget.ProductenType',
requires: [
// alerts
],
xtype: 'gridpanel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
]
});
but now is my question how can i load the JustRent.view.main.ProductenType into the panel with the id 'contenBlock'.

Answer 1

I would use a Viewport as my main container
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport
with a border layout http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.layout.container.Border
and then use add http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport-method-add
and remove methods http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport-method-remove
for component manipulation within the Viewport
pro tip: avoid unnecessary over nesting of components, use the lighter Component possible in each case. e.g containers are lighter in the DOM compared to panels so if you only need a container don't use a panel (not saying this is the case) .
Also I recommend Extjs in Action, awesome book that will help you really understand the framework.