I have a tree structure in a panel on the left. And when i click a leaf, I want to show something different in the main panel. In other words, I need to access a dirrerent view from my controller. Here is the code for the Controller:

Ext.define('Service.controller.ObjectTrees', {
extend: 'Ext.app.Controller',
stores: ['ObjectTrees'],
models: ['ObjectTree'],
views: ['ObjectTree', 'domain.SafeCustody'],
refs: [
{ref: 'panel', selector: 'safecustodies'}
init: function() {
'#objectTree': {
itemclick: this.onItemClicked

onItemClicked: function(tree, record, item, index, e) {
The problem seem to be that the safecustodies selector in the ref is undefined. I have debugged the Ext.ComponentManager in the itemclick event, and the component (grid) for the safecustodies xtype is not there. The only way I can get i there is to render the component somewhere on the screen during initialization. So my question is: How do you get a not rendered component to be registered in the ComponentManager?

Here is the code for the class I need to be registered in the ComponentManager:

Ext.define('Service.model.domain.SafeCustody', {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url : 'js/data/depoter.json',
headers: 'Content-type: application/json',
reader: 'json'
fields: [{name: 'id', mapping: 'safeCustody.id'}, {name: 'adventDate', mapping: 'safeCustody.advent.aktivDato', type: 'date'}]
Ext.define('Service.view.domain.SafeCustody' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.safecustodies',
title: 'Depoter',
width: 200,
height: 150,
store: 'domain.SafeCustodies',
columns: [
{text: 'Id', dataIndex: 'id'},
{text: 'Advent Dato', dataIndex: 'adventDate', xtype: 'datecolumn'}
Ext.define('Service.controller.domain.SafeCustodies', {
extend: 'Ext.app.Controller',
stores: ['domain.SafeCustodies'],
models: ['domain.SafeCustody'],
views: ['domain.SafeCustody'],
init: function() {
Ext.define('Service.store.domain.SafeCustodies', {
extend: 'Ext.data.Store',
model: 'Service.model.domain.SafeCustody',
autoLoad: true