Page 2 of 2 FirstFirst 12
Results 11 to 11 of 11

Thread: Centre image within panel

  1. #11
    Sencha User
    Join Date
    Jul 2011
    Vote Rating

    Default Found a workaround...

    Thanks for everyone's help.

    tvanzoelen - I tried combining as you suggested but still only a horizontal align unfortunately, and raz0r1i did try your margin auto suggestion but no effect on either horizontal or vertical layout.

    I then spent a couple of hours playing about making my center panel a 'vbox' and trying layout { pack : 'center', align: 'center' } and although this did move the image down the panel it calculated the top margin as the size of the vbox panel / 2 effectively vertical aligning the image at the bottom.

    This gave me the idea to just work out the size of the top margin manually. I know the height of my modal window (v_height) and the size of my image (rec.get('height')), and I can see with firebug that the title bar etc. takes 88 pixels so a little simple arithmetic and I'm done.

      var v_top_margin = 'margin-top:' + ((v_height - 88 - rec.get('height')) / 2);
      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',
          flex     : 1,
          id       : 'sl_image',
          name     : 'sl_image',
          readOnly : true,
         style      : v_top_margin,
          html     : v_url
    I'm sure there must be an easier way to do this but after pulling my hair out for the last two evenings trying to get it to work I'll settle for this for now.

    Thanks again
    Attached Images Attached Images

Page 2 of 2 FirstFirst 12

Tags for this Thread

Posting Permissions

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