How to initiate another class object in a view file in sencha - extjs

Question

I have two view files list1.js and list2.js. in my 3rd view file mainTool.js when I am adding objects for above two classes, but it gives me the following error.
But when I try this in directly in app.js no error is given. Please help me
Uncaught ReferenceError: list1 is not defined
Ext.define('test.view.mainTool', {
extend: ['Ext.Container'],
requires: ['Ext.field.Search',
'test.view.list',
'test.view.list2',
'Ext.Toolbar'],
initialize: function () {
var list1 = Ext.create('test.view.list');
var list2 = Ext.create('test.view.list2');
list2.setHidden(true);
},
config: {
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'normal',
items: [{
xtype: 'searchfield',
placeHolder: 'Search...',
left: true,
id: 'mainSearch',
width: 200,
}, {
xtype: 'button',
ui: 'action',
text: 'filter',
id: 'filter'
}, {
xtype: 'spacer'
}, {
xtype: 'button',
ui: 'action',
text: 'showOnMap',
id: 'showOnMap'
}, {
xtype: 'button',
ui: 'action',
iconCls: 'arrow_left',
id: 'back'
}, {
xtype: 'button',
ui: 'action',
iconCls: 'home',
id: 'home'
}
]
},
list1, {
xtype: 'spacer'
},
list2,
]
}
});

Answer 1

Call the parent method first and add the items in your inizialize method and not in the config options:
initialize: function () {
this.callParent(arguments);
var list1 = Ext.create('test.view.list');
var list2 = Ext.create('test.view.list2');
list2.setHidden(true);
this.items = [{
xtype: 'toolbar',
docked: 'top',
ui: 'normal',
items: [{
xtype: 'searchfield',
placeHolder: 'Search...',
left: true,
id: 'mainSearch',
width: 200,
}, {
xtype: 'button',
ui: 'action',
text: 'filter',
id: 'filter'
}, {
xtype: 'spacer'
}, {
xtype: 'button',
ui: 'action',
text: 'showOnMap',
id: 'showOnMap'
}, {
xtype: 'button',
ui: 'action',
iconCls: 'arrow_left',
id: 'back'
}, {
xtype: 'button',
ui: 'action',
iconCls: 'home',
id: 'home'
}
]
},
list1, {
xtype: 'spacer'
},
list2,];
}