General confusion about Layouts

[Tobias2200]

I am currently struggling with the new MVC Pattern in Sencha Touch 2.

I looked at the Kiva and Twitter examples and at the sencha con app slides (is the source code available anywhere?) but i can't quite figure it out.

Right now I am trying to have a List inside the Main view but I can't get it to stretch over the whole screen and the layouting doesnt seem to work at all.

I am working with sencha touch 2PR2 and this is my code:

app.js:

Ext.Loader.setConfig({ enabled: true});


Ext.application({
    name: "Marmobile",
    controllers: ['TaskController'],
    models: ['Task']
});

TaskController.js:

Ext.define('Marmobile.controller.TaskController',
	{
		extend : 'Ext.app.Controller',


		views :[ 'Main' ],
		
		stores: ['Tasks'],


		refs :
			[
				{
					ref : 'main',
					selector : 'mainview',
					autoCreate : true,
					xtype : 'mainview'
				} ],
		init: function()
		{
			this.getMainView().create();
			console.log('task controller created!');
		}
	});

Main.js:

Ext.define('Marmobile.view.Main',
	{
		extend : 'Ext.Container',
		requires :
			[ 'Marmobile.view.TaskList' ],


		config :
			{
				fullscreen : true,
				layout :
					{
						type : 'vbox'
					},
				items :
					[
						{
							xtype : 'tasklist',
							flex : 1
						},
						{
							xtype : 'label',
							html : 'test123',
							flex : 5
						} ]
			}
	});

TaskList.js:

Ext.define('Marmobile.view.TaskList', {
    extend: 'Ext.List',
    xtype : 'tasklist',


    config: {
        store        : 'Tasks',
        allowDeselect: false,
        scrollable   : 'auto',
        deselectOnContainerClick: false,
        itemTpl: '{name}'
    }
});

Please explain what I am doing wrong, any help is greatly appreciated

[rdougan]

In the layout configuration of your Main panel, add align: 'stretch'. This will stretch the items horizontally, and should fix your issue.

[Tobias2200]

I changed it to

fullscreen : true,
				layout :
					{
						type : 'vbox',
						align : 'stretch'
					},
				items :
					[
						{
							xtype : 'tasklist',
							flex : 1
						},
						{
							xtype : 'label',
							html : 'test123',
							flex : 5
						} ]

but the problem is still there.

[Tobias2200]

I still haven't managed to get this to work , could anyone look into it again, please?

[linuxyf]

xtype : 'tasklist',flex :1,width: 300,height: 500,

[linuxyf]

i encounter same problem, if i don't set the width and height of the list, it can't be showed normally.

[Tobias2200]

thanks for your reply linuxyf!
that does work indeed, but now the list is still not fullscreen, it has tge size i specify, which is not very practicable.

i now found a way to get it working. create a Ext.container, dont set the fullscreen attribute, add it to the viewport with Ext.Viewport.add.

the layouts are still not working the way they are supposed to for me, e.g. a hbox layout looks just like a vbox or fit layout and the flex values dont do anything :/

[linuxyf]

expect sencha touch master to solve the problem!