1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    7
    Vote Rating
    0
    ScottWalkinshaw is on a distinguished road

      0  

    Question Answered: Centre image within panel

    Answered: Centre image within panel


    Hi There,

    Would someone be able to help me with centering an image (both horizontally and vertically) within a panel? I've messed around with layout and layout config but can't find the correct way to do it.

    The center panel within a layout panel holds the image (see screenshot) but I want the image centered. Any ideas please?

    Thanks
    Scott

    Center Panel:
    Code:
      Ext.define('indigo.f_item_image', {
        extend         : 'Ext.panel.Panel',
        autoScroll    : true,
        id            : 'f_item_image',
        alias          : 'widget.f_item_image',
        frame       : true,
        items       : [ {
          xtype      : 'hiddenfield',
          id         : 'sl_library_id',
          name       : 'sl_library_id',
          readOnly   : true,
          value      : rec.get('library_id')
        }, {
          xtype     : 'box',
          id        : 'sl_image',
          name      : 'sl_image',
          readOnly  : true,
          html      : v_url
        }],
        dockedItems    : [{
          xtype       : 'toolbar',
          id          : 'sl_bottom',
          name        : 'sl_bottom',
          dock        : 'bottom',
          layout      : {
            pack: 'center'
          },
          items: [ {
            xtype   : 'button',
            id      : 'sl_delete',
            name    : 'sl_delete',
            width   : 80,
            height  : 30,
            frame   : true,
            border  : true,
            type    : 'submit',
            text    : 'Delete',
            icon    : 'icons/web2_blue/24x24/Trash.png',
            cls     : 'x-btn-text-icon',
            handler : function() {
                        f_submit('-', 'D')
                      }
          }]
        }]
      });
    Layout Panel:
    Code:
        var w_show_item = new Ext.Window ({
                       id          : 'w_show_item',
                       name        : 'w_show_item',
                       title       : rec.get('title'),
                       width       : v_width,
                       height      : v_height,
                      layout    : 'border',
                      resizable : false,
                      draggable : true,
                      modal     : true,
                      items:[{
                        region       : 'west',
                        frame        : true,
                        border       : false,
                        width        : 175,
                        xtype        : 'f_item_detail'
                       }, {
                        region       : 'center',
                        frame        : true,
                        border       : false,
                        width        : 150,
                        xtype        : 'f_item_image'
                       }]
                     });
    Attached Images

  2. You must combine our answers and put arcan9nes style on the div.

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,108
    Answers
    83
    Vote Rating
    31
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    I don't understand this part

    Code:
    {
          xtype     : 'box',
          id        : 'sl_image',
          name      : 'sl_image',
          readOnly  : true,
          html      : v_url
        }
    isn't 'box' a layout and you want to give that panel a box layout?

    Code:
    {      
          id           : 'sl_image',
          name      : 'sl_image',
          readOnly  : true,
          html        : v_url,
          layout: {
           type: 'box',
           pack: 'center'
         }
    }
    Maybe ...?

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    27
    Answers
    3
    Vote Rating
    0
    arcan9ne is on a distinguished road

      0  

    Default


    I would try adding the style property:
    Code:
    Ext.define('indigo.f_item_image', {
    extend         : 'Ext.panel.Panel',
    style: 'text-align: center;'
    ...

  5. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    7
    Vote Rating
    0
    ScottWalkinshaw is on a distinguished road

      0  

    Default


    Thanks for the suggestion but if I don't specify the xtype of the item the layout window doesn't render correctly. All I'm trying to do with saying xtype :'box' is to change the item component type from the panel default xtype which is texfield I believe. I can specify xtype: 'component' but I get the same results.

    I don't mind whether just the image is centered or all items within both the west panel and the centre panel are centered so I've tried specifying layout: {pack = 'center'} at both the image item level and the layout panel level but neither have any effect.

    Thanks

  6. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    7
    Vote Rating
    0
    ScottWalkinshaw is on a distinguished road

      0  

    Default


    Thanks - that centered the image horizontally! Still struggling to center it vertically though, I tried style: 'text-align:center;vertical-align:middle;' but that has no effect. Any thoughts?

    Cheers

  7. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,108
    Answers
    83
    Vote Rating
    31
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Interesting

    I don't understand that box thing. Is the image in v_url ?

    then maybe wrap a div around it. '<div>' ++ '</div>' and center that div with a style. Or align it center then you have your horizontal center.

    Code:
    xtype     : 'box',
          id        : 'sl_image',
          name      : 'sl_image',
          readOnly  : true,
          html      : "<div align="center">" + v_url + "'</div>"'
    it should be possible to do whatever your want with html

  8. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    27
    Answers
    3
    Vote Rating
    0
    arcan9ne is on a distinguished road

      0  

    Default


    To align vertically, you should try the following:
    Code:
    style: 'display: table-cell; vertical-align: middle; text-align: center'

  9. #8
    Sencha User
    Join Date
    Jul 2011
    Posts
    7
    Vote Rating
    0
    ScottWalkinshaw is on a distinguished road

      0  

    Default


    Hi Guys,

    Thanks for all the suggestions but still not there yet.

    tvanzoelen - if if I try to put it in a div and center that it still only centers the image horizontally (I've changed the xtype from box to component and used a literal for the html instead of my variable to make it easier to understand):
    Code:
      Ext.define('indigo.f_item_image', {
        extend     : 'Ext.panel.Panel',
        id         : 'f_item_image',
        alias      : 'widget.f_item_image',
        frame      : true,
        autoScroll : true,
        items      : [ {
          xtype      : 'hiddenfield',
          id         : 'sl_library_id',
          name       : 'sl_library_id',
          readOnly   : true,
          value      : rec.get('library_id')
        }, {
         xtype     : 'component',
          id       : 'sl_image',
          name     : 'sl_image',
          readOnly : true,
          html     : '<div align="center"> <img src="images/images.jpg"></div>'
        }],
    arcan9ne - I've also tried your suggestion, I've tried adding the style config at the panel level and at the item level, but again this only centers the image horizontally...

    Code:
      Ext.define('indigo.f_item_image', {
        extend     : 'Ext.panel.Panel',
        id         : 'f_item_image',
        alias      : 'widget.f_item_image',
        frame      : true,
        autoScroll : true,
        style      : 'display: table-cell; vertical-align: middle; text-align: center',
        items      : [ {
          xtype      : 'hiddenfield',
          id         : 'sl_library_id',
          name       : 'sl_library_id',
          readOnly   : true,
          value      : rec.get('library_id')
        }, {
         xtype     : 'component',
          id       : 'sl_image',
          name     : 'sl_image',
          readOnly : true,
          html     : '<img src="images/images.jpg">'
        }],
    HTML isn't my forte (which is why I thought I'd try to use a framework) but there must be a way to do it...

    Thanks

  10. #9
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,108
    Answers
    83
    Vote Rating
    31
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    You must combine our answers and put arcan9nes style on the div.

  11. #10
    Sencha User
    Join Date
    Sep 2009
    Posts
    84
    Answers
    8
    Vote Rating
    -1
    raz0r1 is an unknown quantity at this point

      0  

    Default


    If your image-panel is maximized (so it fills the full right side of the window), you maybe go better by adding "margin:auto" to the image.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar