1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    21
    Vote Rating
    1
    Tobias2200 is on a distinguished road

      0  

    Question General confusion about Layouts

    General confusion about Layouts


    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:
    Code:
    Ext.Loader.setConfig({ enabled: true});
    
    
    Ext.application({
        name: "Marmobile",
        controllers: ['TaskController'],
        models: ['Task']
    });
    TaskController.js:
    Code:
    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:
    Code:
    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:
    Code:
    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

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    In the layout configuration of your Main panel, add align: 'stretch'. This will stretch the items horizontally, and should fix your issue.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    21
    Vote Rating
    1
    Tobias2200 is on a distinguished road

      0  

    Default


    I changed it to
    Code:
    fullscreen : true,
    				layout :
    					{
    						type : 'vbox',
    						align : 'stretch'
    					},
    				items :
    					[
    						{
    							xtype : 'tasklist',
    							flex : 1
    						},
    						{
    							xtype : 'label',
    							html : 'test123',
    							flex : 5
    						} ]
    but the problem is still there.
    Attached Images

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    21
    Vote Rating
    1
    Tobias2200 is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    0
    linuxyf is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    0
    linuxyf is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    21
    Vote Rating
    1
    Tobias2200 is on a distinguished road

      0  

    Default


    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 :/

  8. #8
    Sencha User
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    0
    linuxyf is on a distinguished road

      0  

    Default


    expect sencha touch master to solve the problem!

Thread Participants: 2

Tags for this Thread