Fullscreen image not showing

[rwbaker]

I'm creating a panel with a titlebar and an image set to fullscreen. The image doesn't show unless it has a fixed height in pixels. Shouldn't fullscreen be enough?

    showMap: function(dataview, index, element, record) {

        var mapPanel = Ext.create('Ext.Panel', {            

            id          : 'firemapimg',

            items       : [
                {
                    xtype      : 'toolbar',
                    title       : record.get('title'),
                    docked      : 'top'
                },
                {
                     xtype       : 'image',
                    src         : record.get('src'),
                    fullscreen  : true
               }
            ]
        });

        Ext.Viewport.animateActiveItem(mapPanel, {type: 'slide', direction: 'left'});
    } 

[mitchellsimoens]

You shouldn't use fullscreen config if it is a child of another component. Your mapPanel should use fit layout.

[rwbaker]

Perfect, thanks.

[kalor]

Didn't work for me

No matter what I do, images only appear if you set a specific height and width.

    	            {
    	            	xtype: 'panel',
    	                layout: 'fit',
    	                items: [
    	                        {
    	                            xtype: 'image',
    	                            id: 'imgPic',
    	                            hidden: false,
//    	                            flex: 1,
//    	                            width: 250,
//    	                            height: 250,
    	                            src:'<snip>'
    	                        }
    	                        ]
    	            }

[mitchellsimoens]

In that code, as long as the panel has a size the child item will have the same height and width so I suspect the panel doesn't have a size.

[nirajanrk]

Thanks for the helpful reply!

How does one resize the image? More so, I want it to autofit to its parent toolbar.
Changing the height and width only clips it but doesn't actually resize it.

[mitchellsimoens]

You may want to use the background-size CSS rule on the image component. The image is set as the background of the <div>

[=NR=]

Didn't work for me

No matter what I do, images only appear if you set a specific height and width.

                    {
                        xtype: 'panel',
                        layout: 'fit',
                        items: [
                                {
                                    xtype: 'image',
                                    id: 'imgPic',
                                    hidden: false,
//                                    flex: 1,
//                                    width: 250,
//                                    height: 250,
                                    src:'<snip>'
                                }
                                ]
                    }

the flex property of that xtype:'image', will not have any effect unless layout property of the parent container (xtype:'panel') is either 'hbox' or 'vbox' (source)

[mitchellsimoens]

No it won't but the parent does have fit layout but should remove flex, width and height configs from the image you are right about that.

[=NR=]

No it won't but the parent does have fit layout but should remove flex, width and height configs from the image you are right about that.

sorry, can you clarify what you mean ?