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

      0  

    Default Found a workaround...

    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.

    Code:
      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
    Scott
    Attached Images