1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    France
    Posts
    6
    Vote Rating
    0
    Biloutage is on a distinguished road

      0  

    Default Unanswered: Problem in including a list into a panel

    Unanswered: Problem in including a list into a panel


    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 :

    Code:
    Ext.define("Pafe123.model.OptionsModel",
    {
    	extend: "Ext.data.Model",
    	config:
    	{
    		fields: ['optionName']
    	}
    });
    Then, in my main class, I create the dumb view :

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

    Code:
    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 !

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Location
    France
    Posts
    6
    Vote Rating
    0
    Biloutage is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread