1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    118
    Answers
    11
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default Unanswered: Scrollable doesn't work in a Panel with a Xtemplate in tpl property

    Unanswered: Scrollable doesn't work in a Panel with a Xtemplate in tpl property


    Hi,

    So I have a panel with the following items :
    Code:
    items : 
    [
     {
    	xtype : 'panel',
    	layout : {
    	        type : 'vbox',
    		pack : 'center',
    		align : 'stretch'
    	},
    	items : [
    	 {
    	        xtype : 'panel',
    		tpl : detailImageTpl,
    		id : 'detailImage',
    		data : {
    		}
    	},
    	{
    		xtype : 'panel',
    		tpl : detailViewTpl,
    		id : 'detailPanel',
    		data : {
    		}
    	}
          ]
      }
    ]
    
    If I use the "scrollable" property, the data in the tpl does not show. I'm calling a "setData({…..});" function on the tpl at another point in my code. If I comment the scrollable view, the data shows, but the obviously does not scroll.
    How do you make a template scroll ??

    Sasha

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,608
    Answers
    3450
    Vote Rating
    818
    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


    This is working for me:

    Code:
    Ext.Viewport.add({
        xtype      : 'panel',
        scrollable : true,
        tpl        : '{foo}',
        items      : [
            {
                xtype : 'toolbar',
                docked : 'top',
                items  : [
                    {
                        text    : 'Set Data',
                        handler : function(btn) {
                            var panel = btn.up('panel');
    
                            panel.setData({
                                foo : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus nunc vel felis pellentesque a vestibulum arcu aliquam. Morbi sit amet lectus a tortor posuere interdum ut id turpis. Praesent tincidunt pellentesque egestas. Nam eget libero turpis. Maecenas quis diam eu diam imperdiet ultricies. Duis nec libero sit amet mi ultrices commodo. Curabitur lorem leo, sagittis eu consequat ac, blandit et leo. Integer non sodales enim. Aliquam ultricies varius risus at vestibulum. Ut molestie, dolor nec aliquam euismod, urna justo cursus purus, a sagittis ante velit eget velit. Aliquam erat volutpat.<br><br>Proin consectetur venenatis vulputate. Suspendisse nisi lacus, porta ut laoreet ut, suscipit ut odio. Vivamus vitae elit nec diam bibendum eleifend. Nulla facilisis velit sit amet enim euismod at condimentum odio porttitor. Nulla cursus ipsum vel nisl laoreet lacinia. Cras sit amet nibh eu magna eleifend malesuada eget et lectus. Morbi sed dolor adipiscing libero dapibus imperdiet in eu justo. Integer condimentum rutrum nunc eu pretium. Sed dolor velit, adipiscing non venenatis sed, porta quis elit. Suspendisse vitae pellentesque ligula. Nulla quis arcu ac felis porta dictum.<br><br>Donec eu ligula at mauris laoreet sagittis. Donec sed odio diam. Fusce in dolor turpis. Quisque elementum accumsan elit vitae eleifend. In mollis blandit augue, venenatis sagittis urna tincidunt vitae. Proin porttitor iaculis nulla in egestas. Ut ac quam sit amet orci mattis egestas. Nulla nec ligula nec leo semper ultrices at vel purus. Integer eget nisl nunc. Donec eget nisi lacus, vitae venenatis tortor. Proin turpis tortor, feugiat a porta vitae, viverra vitae urna. Integer molestie, sem vitae facilisis eleifend, eros tellus luctus nulla, in ultricies velit risus at sem. Quisque interdum consequat neque, ac tempor elit porta eu.<br><br>Aenean lacinia, ligula quis vulputate pharetra, elit enim porttitor felis, quis tristique enim sapien eu erat. Vestibulum venenatis luctus tincidunt. Morbi in justo ut diam mollis congue. Nullam placerat eros non tellus lobortis vehicula a eget lorem. Donec ac ligula est, quis lobortis erat. Maecenas non massa at libero fermentum interdum. Vestibulum tincidunt metus et lorem aliquam vehicula. Proin sem dolor, feugiat eget elementum eu, laoreet eu dolor. Proin at massa felis, nec ullamcorper dolor. Integer vitae turpis arcu, ac consectetur urna. Nunc venenatis fringilla lobortis. Suspendisse et magna a eros gravida dignissim. Sed consequat pellentesque mi feugiat eleifend.<br><br>Nam rutrum placerat nibh, at bibendum nisi viverra vel. Nulla facilisi. Fusce sed urna in eros adipiscing scelerisque. Nulla eu dignissim turpis. Donec non enim libero. Cras vel justo a tortor facilisis ullamcorper. Etiam vehicula, turpis vel placerat ultrices, purus augue porttitor lacus, non rutrum metus sem non nisl. Nulla elementum arcu quis risus pulvinar pharetra. Donec ullamcorper rutrum bibendum. Suspendisse bibendum mollis elit ullamcorper mollis. Suspendisse potenti. Nam dictum fermentum tortor, a hendrerit neque feugiat nec. Praesent quis lectus nunc, sed euismod lorem. Aenean felis mi, auctor sit amet blandit ut, pharetra et libero. Quisque tempor vestibulum ipsum.'
                            });
                        }
                    }
                ]
            }
        ]
    });
    I see you are using vbox layout, maybe give the child panels a flex or a height config?
    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.

Thread Participants: 1

Tags for this Thread