Results 1 to 6 of 6

Thread: 2 lists in one Panel

  1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    9
    Vote Rating
    0
      0  

    Default 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 Frres d'Epinire", "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
    11
      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
      0  

    Default

    doesn't seem to work :-(

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      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
      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 User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,010
    Vote Rating
    940
      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.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •