trying to catch resize event on a panel

**jep** · 27 Sep 2010 2:10 PM

I'm just trying to get a simple resize event handler working, but I've had no luck. Here's my code:

Code:

 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <title id="title">test</title>
    
    <link rel="stylesheet" href="../resources/css/ext-touch.css" type="text/css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

    <script type="text/javascript" src="../ext-touch-debug.js"></script>

    <script type="text/javascript">
      Ext.setup({
        onReady: function() {
          
          var map = new Ext.Map({
            listeners:{
              resize:function() {
                console.log('resize');              
              }
            } 
          });

          var mainPanel = new Ext.Panel({
            fullscreen: true,
            items:[map]
          });
        }
      });
    </script>

 </head>

 <body></body>

 </html>

But I never see any messages logged. I do if I just throw a "console.log('here')" somewhere in onReady. So it's not my debugger. Am I doing something wrong? The api was a bit sparse on examples for listeners, so I had to cobble this together from random examples.

**evant** · 27 Sep 2010 3:21 PM

The main panel has no layout, so it's never going to size the child items. You want the fit layout.

**jep** · 27 Sep 2010 8:55 PM

Thanks for the reply! Do you mean like this?

Code:

 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <title id="title">test</title>
    
    <link rel="stylesheet" href="../resources/css/ext-touch.css" type="text/css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

    <script type="text/javascript" src="../ext-touch-debug.js"></script>

    <script type="text/javascript">
      Ext.setup({
        onReady: function() {
          
          var map = new Ext.Map({
            listeners:{
              resize:function() {
                console.log('resize');              
              }
            } 
          });

          var mainPanel = new Ext.Panel({
            fullscreen: true,
            layout:'fit',
            items:[map],
            listeners:{
              resize:function() {
                console.log('resize');              
              }
            } 
          });
        }
      });
    </script>

 </head>

 <body></body>

 </html>

I still don't get any resize log messages when I do it this way.

**jep** · 8 May 2012 12:48 PM

Bump. No response, evant? I still don't see panel resize events when I think I should (1.1). Others have reported this as well.

trying to catch resize event on a panel

Thread Tools

Search Thread

Display

trying to catch resize event on a panel

trying to catch resize event on a panel

Similar Threads

Panel Resize Event Question

How to catch Browser Resize event

How to get resize event for Ext.Panel?

[Panel resize event] Is not raised?

how can I catch enddrag event on a panel