Problem in including a list into a panel

[Biloutage]

Hi there, I have a problem while including a simple list into a panel.

For my tests, I create a view including only a simple toolbar with a button. When you tap on the button, you go to another view (with Viewport.setActiveItem(x)). In this new view (x), I want to display a list with a toolbar.

Here is the code which is used for the operation :

First, in a separate class, I create the model :

Ext.define("Pafe123.model.OptionsModel",
{
	extend: "Ext.data.Model",
	config:
	{
		fields: ['optionName']
	}
});

Then, in my main class, I create the dumb view :

Ext.define("Pafe123.view.Main",
{
        extend: "Ext.form.Panel",
	alias: "widget.main",
	requires: "Ext.Anim",


	initialize: function ()
	{	
		this.callParent(arguments);
		
		var button =
		{
                        xtype: "button",
                        ui: "subnav",
			iconMask: true,
			iconCls: 'settings6',
			iconAlign:'center',
			handler: function()
			{
				Ext.Viewport.animateActiveItem(3, {type:'slide', direction:'down'})
			}
                 };


		var toolbar =
		{
                        xtype: "toolbar",
                        docked: "top",
                        title: "Main",
			items:
			[
				button,
                               {xtype: "spacer"}
                        ]
               };	


		this.add(
		[
                       toolbar,
                ]);
	}
});

Here comes the interesting part :

Ext.define("Pafe123.view.Options2",
{
	extend: "Ext.List",
	alias: "widget.options2",
	
	initialize: function ()
	{
		var getModel = Pafe123.model.OptionsModel;
		
		var store = Ext.create("Ext.data.Store",
		{
			id: 'optionList',
			model: getModel,
			data:
			[
				{optionName: 'Firstname'},
				{optionName: 'Lastname'},
				{optionName: 'Username'},
				{optionName: 'Email'},
				{optionName: 'Password'},
				{optionName: 'Set Picture'}
			]
		});
		
		var toolbar =
			{
				xtype: "toolbar",
				docked: "top",
				title: "Account"
			};	
			
		var list = Ext.create('Ext.List',
		{
			id: 'lasuperliste',
			store: store,
			itemTpl: '<div class="contact">{optionName}</div>',
			onItemDisclosure: function(record, btn, index)
			{
			       console.log('test !');
                        }
		});
		
		var lalilou = Ext.create('Ext.Panel',
		{
			fullscreen: true,
			layout: 'card',
                        cardSwitchAnimation: 'slide',
			items: [toolbar,list]
		});
		
		/* this.add(                      //I commented this part
		 [
			 lalilou
		 ]);*/
	}
});

When I execute this code, the list and the toolbar are displayed in a good way, but the view is "forced". I mean, the first thing I see lauching my app is the list, whereas I would rather see the "main" view (the toolbar with the button to tap on).

So I uncommented the last block (the this.add block is the way I displayed all the composents in my others project's classes). the first view displayed is the main one. Well done ! But when taping the button, nothing is displayed (a kind of empty panel I guess). If I do the same while setting fullscreen: 'false', the toolbar is displayed but not the list.

There might be an easy way to fix that, but I didn't find it yet. Grrrr !
Please, have you got any idea ?

Thank you !

[mitchellsimoens]

Couple things... in the last code bit you are not calling this.callParent(); in the initialize method. Are you also creating 2 components with fullscreen set to true? This will add the components to Ext.Viewport which is basically a container using card layout so you will only see one item at a time.

[Biloutage]

You are right, I forgot the this.callParent(arguments); line. I just added it and that doesn't work much.
For the second point, I only set fullscreen to true in the "lalilou" panel. So as for me they would not be any kind of confrontation between two abled fullscreens.

What do you think about the fact that adding this.add([lalilou]), the list is not displayed, but when I don't write the this.add lines, the panel including the toolbar and the list is well shown ?

Anyway, thanks for your answer.