Results 1 to 2 of 2

Thread: How to fit all images in the panel?

  1. #1
    Sencha User
    Join Date
    Jan 2018
    Posts
    5

    Default Answered: How to fit all images in the panel?

    Hi! I tried to create a dataview where images can be viewed but my implementation makes the images display downwards making some of the images not viewable. Is there a way to make the images fit inside the panel? Appreciate the help.

    Code:
    var iPanel= new Ext.panel.Panel({                                    
                                        width: 490,
                                        height: 500,
                                        layout: 'fit',
                                        title: 'Select an avatar',
                                        floating: true,
                                        closable : true,
                                        items: {
                                            extend: 'Ext.view.View',
                                            xtype: 'dataview',
                                            id: 'myDataView',
                                            autoHeight:true,
                                            reference: 'dataview',
                                            itemSelector: 'div.dataview-multisort-item',
                                            store: Ext.create('Admin.store.users.UsersAvatarStore'),
                                            tpl: [
                                                '<tpl for=".">',
                                                    '<div>',
                                                       '<a href="#">',
                                                           '<img id="{name}" src="resources/images/default-avatars/{thumb}" height="72" weigh="72"/>',
                                                       '</a>',
                                                    '</div>',
                                                '</tpl>',
                                                 ]                                     
                                        }

  2. Hi--,

    I think what you're after is via a css style (display:inline-block) on the div. I put together an example that I've used before into a Fiddle that should demonstrate (close at least) to what you're after. **I didn't upload the images but they just point to a local resource in my app.

    https://fiddle.sencha.com/#view/editor&fiddle/2c4q

    Let me know if this helps.

    Best!
    Bryan

  3. #2
    Sencha - Support Team bjdurham85's Avatar
    Join Date
    Mar 2014
    Posts
    962
    Answers
    55

    Default

    Hi--,

    I think what you're after is via a css style (display:inline-block) on the div. I put together an example that I've used before into a Fiddle that should demonstrate (close at least) to what you're after. **I didn't upload the images but they just point to a local resource in my app.

    https://fiddle.sencha.com/#view/editor&fiddle/2c4q

    Let me know if this helps.

    Best!
    Bryan

Similar Threads

  1. Images into panel
    By serjaumfantin in forum Sencha Touch 2.x: Q&A
    Replies: 6
    Last Post: 6 Jun 2012, 1:29 PM
  2. Update images in a panel
    By brazhuca in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 26 Jun 2011, 2:10 PM
  3. Display Images on Ext Js Panel
    By Prabhjot in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 17 Feb 2011, 7:09 PM
  4. images in a panel
    By italoc in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 30 Jul 2009, 6:39 AM
  5. [2.0b1] IE7 and tab panel, autoLoad and images
    By dbinaz in forum Ext 2.x: Bugs
    Replies: 5
    Last Post: 23 Oct 2007, 8:56 AM

Posting Permissions

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