1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    9
    Vote Rating
    0
    gerartje is on a distinguished road

      0  

    Default 2 lists in one Panel

    2 lists in one Panel


    Hello,

    is it true that you can't define 2 lists in one panel?
    I've made 2 custom lists and want them to put below each other.
    But there's only 1 visible.

    Any thoughts?

    Code:
    var onStageData = [
    {"img":"img/t/1.png","name":"I qsdf qsdf", "time":"Vr 9/7 17:35 - 18:25"},
    {"img":"img/t/2.png","name":"qsdf", "time":"Vr 9/7 18:55 - 19:55"},
    {"img":"img/t/3.png","name":"qsdf", "time":"Vr 9/7 20:25 - 21:25"},
    {"img":"img/t/4.png","name":"qsdf qsdf & qdsf", "time":"Vr 9/7 21:55 - 23:05"},
    {"img":"img/t/5.png","name":"qsdf qsdf", "time":"Vr 9/7 23:35 - 01:00"}
    ]
    
    var offStageData = [
    {"img":"img/t/1.png","name":"Het qsdf - Les Frères d'Epinière", "time":"Vr 9/7 16:00 - 00:00"},
    {"img":"img/t/1.png","name":"Eef qsdf", "time":"Vr 9/7 doorlopend"},
    {"img":"img/t/1.png","name":"B-qsdf", "time":"Vr 9/7 doorlopend"},
    {"img":"img/t/1.png","name":"qdsf zoals qsdf qsdf", "time":"Vr 9/7 doorlopend"},
    {"img":"img/t/1.png","name":"qsdf", "time":"Vr 9/7 doorlopend"},
    {"img":"img/t/1.png","name":"qsdf", "time":"Vr 9/7 doorlopend"}
    ]
    
    
    
    var onStageComp = new Ext.Component({
            cls: 'list',    
            scroll: 'vertical', 
            tpl: [              
              '<tpl for=".">',
                '<div class="artist_day">',
                  '<div class="avatar"><img src="{img}" />', 
                  '<div class="artist_day_content">',
                    '<h2>{name}</h2>',
                    '<p>{time}</p>',  
                  '</div>',
                '</div>',
            '</tpl>'
           ]
        });
    	
    	
    var offStageComp = new Ext.Component({
            cls: 'list',    
            scroll: 'vertical', 
            tpl: [              
              '<tpl for=".">',
                '<div class="artist_day">',
                  '<div class="avatar"><img src="{img}" />', 
                  '<div class="artist_day_content">',
                    '<h2>{name}</h2>',
                    '<p>{time}</p>',  
                  '</div>',
                '</div>',
            '</tpl>'
           ]    
    	   
    	});
    
    	
    
    	
    
    ns.dagenDetail1 = new Ext.Panel(
    {
    	layout:
    	{
    		type:"vbox"
    	},
    	title:"info",  
    	items: [
    		onStageComp,offStageComp
    	]   
    });
    
    
    onStageComp.update(onStageData);
    offStageComp.update(offStageData);

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    Try setting a vbox layout on the container that contains both the lists. Then give each one a flex of 1 to have them take up half the space. You could also just set scroll: 'vertical' on the container and scroll: false on both lists.

  3. #3
    Ext User
    Join Date
    Jul 2010
    Posts
    9
    Vote Rating
    0
    gerartje is on a distinguished road

      0  

    Default


    doesn't seem to work :-(

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    Could you provide a bit more source code for us to work with?

  5. #5
    Ext User
    Join Date
    Jul 2010
    Posts
    9
    Vote Rating
    0
    gerartje is on a distinguished road

      0  

    Default


    I have a mainPanel which has a cardLayout.
    The code in the first post is one of the cards.

    I've only added your possible solutions to the code above, but they don't seem to work.
    I can't get 2 different lists in one panel.

    Tnx!

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,835
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Here's an example of putting 2 lists in a panel:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function(){
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
            
            var groupingBase = {
                tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
                itemSelector: 'div.contact',
                
                singleSelect: true,
                grouped: true,
                indexBar: true,
                flex: 1
            };
            
            var list1 = new Ext.List(Ext.apply({
                store: new Ext.data.Store({
                    model: 'Contact',
                    sorters: 'firstName',
                    
                    getGroupString: function(record){
                        return record.get('firstName')[0];
                    },
                    
                    data: [{
                        firstName: 'Tommy',
                        lastName: 'Maintz'
                    }, {
                        firstName: 'Ed',
                        lastName: 'Spencer'
                    }, {
                        firstName: 'Jamie',
                        lastName: 'Avins'
                    }]
                })
            }, groupingBase));
            
            var list2 = new Ext.List(Ext.apply({
                store: new Ext.data.Store({
                    model: 'Contact',
                    sorters: 'firstName',
                    
                    getGroupString: function(record){
                        return record.get('firstName')[0];
                    },
                    
                    data: [{
                        firstName: 'Aaron',
                        lastName: 'Conran'
                    }, {
                        firstName: 'Abe',
                        lastName: 'Elias'
                    }, {
                        firstName: 'Michael',
                        lastName: 'Mullany'
                    }]
                })
            }, groupingBase));
            
            new Ext.Panel({
                fullscreen: true,
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items:[list1, list2]
            });
        }
    });
    To put them side by side, use an hbox layout instead.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. Help with stores and lists.
    By oskars in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 6 Jul 2010, 1:36 PM
  2. extjs 3 tab panel tabs not rendering html lists
    By fireworld2406 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 12 Nov 2009, 8:59 AM
  3. HTML Lists inside a Ex.Panel
    By revortado in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 13 Feb 2009, 1:08 AM
  4. Lists and Iteration
    By innovator in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 24 Sep 2008, 5:34 AM
  5. Sortable Lists?
    By keithpitt in forum Ext 1.x: Help & Discussion
    Replies: 15
    Last Post: 15 Jun 2008, 1:20 PM

Thread Participants: 2