Results 1 to 3 of 3

Thread: report on panel size when viewport changes size

  1. #1
    Ext User
    Join Date
    Aug 2009
    Location
    San Diego, CA.
    Posts
    10
    Vote Rating
    0
      0  

    Default report on panel size when viewport changes size

    I am trying to attach a listener on the viewport of my border layout so that I can obtain the new height and width of the center region when the user changes the size of the viewport by resizing their browser. I am just not having any luck. I'm brand new to ext and have been reading and searching for the past couple days, so i'm now having to resort to asking the experts.

    So, after trying many things, here is my latest just so you can see what i'm trying to do.
    Can anyone tell me how to attach the listener to the center region? The only result i've been getting is the original height of the center region everytime the browser window causes the center region to resize. So, i'm just not getting the new height, only the original height.

    thanks in advance for the help.

    Ext.onReady(function(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var viewport = new Ext.Viewport({
    layout: 'border',
    id: 'fullport',
    items: [
    {
    region: 'north',
    height: 50,
    contentEl: 'north',
    title: 'North',
    margins: '0 0 2 0'
    },
    {
    region: 'south',
    contentEl: 'south',
    split: true,
    height: 50,
    minSize: 20,
    maxSize: 150,
    collapsible: true,
    title: 'South',
    margins: '0 0 0 0'
    },
    {
    region: 'west',
    title: 'West',
    contentEl: 'west',
    split: true,
    width: 50,
    minSize: 20,
    maxSize: 400,
    collapsible: true,
    id: 'w-westregion',
    margins: '0 0 0 0'
    },
    {
    xtype: 'panel',
    region: 'center',
    margins: '0 0 0 0',
    contentEl: 'centerregion',
    id: 'c-centerregion',
    layout: 'fit'
    }
    ]
    });

    viewport.on('resize',resize);

    creg = Ext.getCmp('c-centerregion');
    cvp = viewport.layout.center; /* this yields the same result as creg */

    ccH = creg.getSize().height;
    });
    function resize() {
    alert("center region resized to " + ccH);
    }

  2. #2
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966
    Vote Rating
    18
      0  

    Default

    Regions are Panel's, treat them that way:

    Code:
    ...,
    {
    xtype: 'panel',
    region: 'center',
    margins: '0 0 0 0',
    contentEl: 'centerregion',
    id: 'c-centerregion',
    layout: 'fit',
    listeners: {
       resize : function(){  console.log(arguments); }
     }
    }
    Pls, wrap you samples in [code/] tags.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  3. #3
    Ext User
    Join Date
    Aug 2009
    Location
    San Diego, CA.
    Posts
    10
    Vote Rating
    0
      0  

    Default

    Hey, Hendricd, very nice of you to help me out. That was exactly the info I needed..
    Here is working snippet for other newbies like me:

    Code:
    ...
                    contentEl: 'west',
                    split: true,
                    width: 50,
                    minSize: 20,
                    maxSize: 400,
                    collapsible: true,
                    id: 'w-westregion',
                    margins: '0 0 0 0'
                },
                {
                    xtype: 'panel',
                    region: 'center',
                    margins: '0 0 0 0',
                    contentEl: 'centerregion',
                    id: 'c-centerregion',
                    layout: 'fit',
                    listeners: {
                      resize : function(){
                             console.log(arguments);
                             resize(this.getWidth(),this.getHeight());
                      }
                    }
                }
              ]
          });
        });
        function resize(newWidth,newHeight) {
          /* do whatever you need to do with new width and height values */
          alert("New Width: " + newWidth + " and New Height: " + newHeight);
        }

    Quote Originally Posted by hendricd View Post
    Regions are Panel's, treat them that way:

    Code:
    ...,
    {
    xtype: 'panel',
    region: 'center',
    margins: '0 0 0 0',
    contentEl: 'centerregion',
    id: 'c-centerregion',
    layout: 'fit',
    listeners: {
       resize : function(){  console.log(arguments); }
     }
    }
    Pls, wrap you samples in [code/] tags.

Posting Permissions

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