1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    15
    Answers
    1
    Vote Rating
    0
    onemanclapping is on a distinguished road

      0  

    Default Answered: DataView inside Panel makes content disappear.

    Answered: DataView inside Panel makes content disappear.


    Hello, my problem is the following:

    I have a DataView that works perfectly, but if I add it to a Panel instead of sending it directly to Viewport, its data content disappears. Weird part: everything else (like the titlebar) is rendered ok, and even the data is rendered (see picture) but it just gets hidden for some reason.

    Some help would be greatly appreciated since I can't find anyone with this same simple problem.

    DoublePanel.js
    Code:
    Ext.define("SpeedMarker.view.DoublePanel", {    extend: 'Ext.Panel',
        config: {
            items: [
                {
                	xtype: 'assetlist'
                }
            ]
        }
    });
    AssetList.js
    Code:
    Ext.define("SpeedMarker.view.AssetList", {	xtype: 'assetlist',
        extend: 'Ext.dataview.DataView',
        config: {
        	store: {
            	fields: ['thumbnail', 'duration', 'name', 'date', 'description'],
            	data: [
    	            {thumbnail: 'resources/images/snapshot.png', duration: '01:23:45', name: 'H264_proxy__002.mp4', date: '2012/05/03 12:42:30', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi massa mi, aliquam eu cursus eu, tincidunt id odio. Integer massa erat, gravida a tincidunt condimentum, varius nec velit. Etiam tincidunt, mauris in adipiscing accumsan, enim ligula venenatis leo,'}
    			]
        	},
    
    
        	itemTpl: "<div class='asset'><div class='thumbnail'><img width='200px' height='150px' src='{thumbnail}' alt='thumbnail'/><div class='duration_bar'>{duration}</div></div><h1>{name}</h1><h2>{date}</h2><p>{description}</p></div>",
        	
    		items: [
    			{
        			xtype: 'titlebar',
        			docked: 'top',
        			title: 'asset list',
        			items: [
        				{
        					xtype: 'selectfield',
        					name: 'filters',
        					options: [
        						{text: 'my todo list', value: '1'},
        						{text: 'other filter', value: '2'}
        					]
        				},
        				{
        					xtype: 'searchfield',
        					placeHolder: 'Search',
        					name: 'seachfield',
        					align: 'right'
        				},
        				{
        					xtype: 'selectfield',
        					align: 'right',
        					width: 150,
        					name: 'user',
        					options: [
        						{text: 'John Smith', value: '1'},
        						{text: 'settings', value: '2'},
        						{text: 'logout', value: '3'}
        					]
        				}
        			]
    			}
    		]
        }
    });
    sencha.jpg

  2. All you need to do is to set your "DoublePanel" layout config to "fit".

    Code:
    Ext.define("SpeedMarker.view.DoublePanel", {    
        extend: 'Ext.Panel',
        config: {
            layout: {
                type: 'fit'
            },
            items: [
                {
                    xtype: 'assetlist'
                }
            ]
        }
    });
    Hope this helps.

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    All you need to do is to set your "DoublePanel" layout config to "fit".

    Code:
    Ext.define("SpeedMarker.view.DoublePanel", {    
        extend: 'Ext.Panel',
        config: {
            layout: {
                type: 'fit'
            },
            items: [
                {
                    xtype: 'assetlist'
                }
            ]
        }
    });
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    15
    Answers
    1
    Vote Rating
    0
    onemanclapping is on a distinguished road

      0  

    Default


    Thank you for the quick reply but I just tried that and nothing changed. Any ideas?

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    72
    Answers
    3
    Vote Rating
    2
    sephyroth69 is on a distinguished road

      0  

    Default


    Try providing explicitly a height to your list. Like "height:200px". But the layout part mentionned before should solve the trouble.
    Also check your dom with a web inspector to ensure the data is present in your page and your store.

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    15
    Answers
    1
    Vote Rating
    0
    onemanclapping is on a distinguished road

      0  

    Default


    Quote Originally Posted by sephyroth69 View Post
    Try providing explicitly a height to your list. Like "height:200px".
    Yes! That makes the contents show up.

    Quote Originally Posted by sephyroth69 View Post
    Also check your dom with a web inspector to ensure the data is present in your page and your store.
    That's the last picture of the post: the items are there, but hidden.

    I guess I'm doing something bad then, cos I defined the 'fit' layout and it doesn't seem to apply!

    Thanks.

  7. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    72
    Answers
    3
    Vote Rating
    2
    sephyroth69 is on a distinguished road

      0  

    Default


    Providing a height rather than a layout is only a trick, because you won't know the size of the devices you are targetting. Thus, you should dig more around the layout.

    Have you tried to give your panel the layout like that :

    Code:
    layout: 'fit'

  8. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    15
    Answers
    1
    Vote Rating
    0
    onemanclapping is on a distinguished road

      0  

    Default


    I was doing a very stupid thing and pasted the initial solution *outside* the 'config' element! It's working now. Thank you for your help!

  9. #8
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by onemanclapping View Post
    I was doing a very stupid thing and pasted the initial solution *outside* the 'config' element! It's working now. Thank you for your help!
    You are welcome
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


Thread Participants: 2

Tags for this Thread