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,834
    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

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