PDA

View Full Version : General confusion about Layouts



Tobias2200
22 Nov 2011, 12:48 AM
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
22 Nov 2011, 10:32 AM
In the layout configuration of your Main panel, add align: 'stretch'. This will stretch the items horizontally, and should fix your issue.

Tobias2200
22 Nov 2011, 12:33 PM
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
24 Nov 2011, 2:16 AM
I still haven't managed to get this to work , could anyone look into it again, please?

linuxyf
24 Nov 2011, 8:27 AM
xtype : 'tasklist',flex :1,width: 300,height: 500,

linuxyf
24 Nov 2011, 8:32 AM
i encounter same problem, if i don't set the width and height of the list, it can't be showed normally.

Tobias2200
24 Nov 2011, 9:35 AM
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
24 Nov 2011, 7:11 PM
expect sencha touch master to solve the problem!