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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi