1. #1
    Ext User
    Join Date
    Jun 2008
    Posts
    19
    Vote Rating
    1
    mickh is on a distinguished road

      0  

    Default How to get resize event for Ext.Panel?

    How to get resize event for Ext.Panel?


    Below is a very simple piece of Ext JS, where a viewport contains a single panel. The panel has a listener for the resize event, but it never fires.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
      <head>
        <meta content='text/html' http-equiv='Content-Type' />
        <title>Test</title>
        <link href="ext/resources/css/ext-all.css?1224051869" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <script src="ext/adapter/ext/ext-base.js?1224051838" type="text/javascript"></script>
        <script src="ext/ext-all-debug.js?1224051911" type="text/javascript"></script>
        <script type='text/javascript'>
            var panel = new Ext.Panel({
              title: 'panel',
              monitorResize: true,
              listeners: {
                  resize: {
                      fn: function(el) {
                          alert('panel resize');
                      }
                  }
              },
              html: '<p>hello I am a panel.</p>'
            });
            var viewport = new Ext.Viewport({
                items: [
                  panel
               ]
            });
        </script>
        
      </body>
    </html>
    I must be doing something really basic wrong, but I've searched the forum for a couple of hours, but can't find a solution.

    Many thanks in advance for any advice,
    mick

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Why would you expect the panel to ever be resized?

  3. #3
    Ext User
    Join Date
    Jun 2008
    Posts
    19
    Vote Rating
    1
    mickh is on a distinguished road

      0  

    Default


    Thanks for replying.

    Quote Originally Posted by Animal View Post
    Why would you expect the panel to ever be resized?
    Sorry if I wasn't clear. What I meant was that when I resize the browser window manually, the panel is resized, but the resize event does not fire.

    The resize event does fire for the viewport object, but not for the panel inside it. I seem to recall reading somewhere in a forum post a few months back that the resize event only fires for the outermost component, which matches what I'm seeing here. Is that true?

    The reason I am asking all this is that my actual desire is to create a reusable component class derived from Ext.Panel and I want to handle resize events for that component, but the bit I am missing is how to actually get resize events to fire, if that component is not the outermost container.

    thanks again,
    mick

  4. #4
    Ext User Ceeke's Avatar
    Join Date
    Sep 2008
    Posts
    14
    Vote Rating
    0
    Ceeke is on a distinguished road

      0  

    Default


    I guess for instance when he loads an image in that panel.
    Panel has a width of 100px for example, when an image with width 200px is loaded into the panel, it resizes. (Not sure if this is possible, just a thought)

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The Panel is NOT sized at all by any code.

    The DIV wills the width of the container like any DIV does, but it is NOT being explicitly sized because you are not asking for it to be sized.

    Read this: http://extjs.com/deploy/dev/docs/?class=Ext.Container

  6. #6
    Ext User
    Join Date
    Jun 2008
    Posts
    19
    Vote Rating
    1
    mickh is on a distinguished road

      1  

    Default


    Quote Originally Posted by mickh View Post
    The resize event does fire for the viewport object, but not for the panel inside it. I seem to recall reading somewhere in a forum post a few months back that the resize event only fires for the outermost component, which matches what I'm seeing here. Is that true?
    Looks like it isn't true. I realised the bug in my original example was that I hadn't specified layout: 'fit' for the viewport. I now have a more complicated example with a panel nested inside a panel nested inside the viewport and the innermost panel does get the resize event as desired:

    Code:
            var inner_panel = new Ext.Panel({
              title: 'panel',
              listeners: {
                  resize: {
                      fn: function(el) {
                          alert('inner panel resize');
                      }
                  }
              },
              html: '<p>hello I am the inner panel.</p>'
            });
    
            var outer_panel = new Ext.Panel({
              title: 'outer panel',
              layout: 'fit',
              monitorResize: true,
              listeners: {
                  resize: {
                      fn: function(el) {
                          alert('outer panel resize');
                      }
                  }
              },
              items: [ inner_panel ]
            });
            
            var viewport = new Ext.Viewport({
              monitorResize: true,
                layout: 'fit',
                items: [
                  outer_panel
               ]
            });
    The key to the problem being the various uses of layout: 'fit'

    thanks for your help,
    mick

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,498
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    They key is using not necessarily layout 'fit', but a layout that lays out child items in the way you want.

    With any Container, you needd to consider the layout.

    the Container API docs that I pointed you at stress this important point.

    Your particulay example, you put a layout:'fit' in a layout:'fit'. Take care not to overnest.

    You can just put innerPanel directly into the Viewport. The extra wrapping Panel is totally redundant.

  8. #8
    Ext User
    Join Date
    Jun 2008
    Posts
    19
    Vote Rating
    1
    mickh is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    They key is using not necessarily layout 'fit', but a layout that lays out child items in the way you want.

    With any Container, you needd to consider the layout.

    the Container API docs that I pointed you at stress this important point.
    Yes thanks for that. I will read it multiple times to help it sink in.

    Quote Originally Posted by Animal View Post
    Your particulay example, you put a layout:'fit' in a layout:'fit'. Take care not to overnest.

    You can just put innerPanel directly into the Viewport. The extra wrapping Panel is totally redundant.
    Yes I know. I was purely doing it in this case for testing purposes. Thanks for pointing it out though.

    regards,
    mick

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi