Results 1 to 10 of 10

Thread: Panel Resize Event Question

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    419
    Vote Rating
    2
      0  

    Question Panel Resize Event Question

    Hi There,

    I am probably asking something that has been answered a million times by you guys, but after digging through the forums I am no closer to solving this.

    In my application I am using a viewport which contains my own panel object which I have extended to include some additional functionality. When resizing the browser I wish to capture the Panel's resize event so I can resize its contents (in this case a google map). The event never fires though when I do resize the window, I can capture the viewports resize event without a problem, but I dont understand why I cannot capture the Panel's!

    My code is below:

    ASPX
    HTML Code:
    <script type="text/javascript" language="javascript">
    Ext.onReady(function(){
    new SBS.Websites.ExtPWP.Viewport();
     
    });
    </script>
    </head>
    <body>
    <div id="panelNorth"></div>
    <div id="panelCenter">
    <div id="googleMap"></div>
    </div>
    <div id="panelSouth"></div>
    </body>
    VIEWPORT
    Code:
     
    SBS.Websites.ExtPWP.Viewport = function() {
    //this.map = null;
    this.mapPanel=new SBS.Websites.ExtPWP.Map();
     
    SBS.Websites.ExtPWP.Viewport.superclass.constructor.call(this, {
     
     id:'mainViewport',
     layout: 'border',
     renderTo: Ext.getBody(),
     items: [{
       xtype:'box',
       anchor:'',
       region: 'north',
       contentEl: 'panelNorth',
       height: 76,
       autoEl:{
        tag:'div', 
        cls: 'header',
        children:[{
         tag:'div',
         cls: 'imgLeft'
        },{
         tag:'div',
         cls: 'divTitle',
         children: [{
          html: '<label id="lblTitle" />&nbsp;-&nbsp;<span id="servertime"></span>'
         }]
        },{
         tag:'div',
         cls: 'imgRight'
        }]
       }
     
      },{
       region: 'center',
       items:[this.mapPanel]
       ,tbar: new Ext.Toolbar({
     
        items: [
     
        'Select Service:',
        new Ext.form.ComboBox({
         id:'cmbSelect',
         mode: 'local',
         displayField: 'name',
         valueField: 'ids',
         triggerAction: 'all',
         listeners: {
          'select': function(cmb, rec, idx) {
           //filterMapDisplay(this.getValue());
          }
         }
        }),
        '->',{
         text: 'Logout',
         handler: function(){
          //panwin.show();
         }
        }]
       })
     
            },{
       region: 'south',
       contentEl: 'panelSouth',
       title: 'Service Details',
       height: 80
      }]
     
     });
     
     var delayMap = new Ext.util.DelayedTask(function(){this.initMap();},this);
         delayMap.delay(600);
    };
    Ext.extend(SBS.Websites.ExtPWP.Viewport, Ext.Viewport, {
    initMap:function() {
            this.mapPanel.init();
        },
    });
    Code:
     
    PANEL
    SBS.Websites.ExtPWP.Map = function() {
    this.map = null;
    SBS.Websites.ExtPWP.Map.superclass.constructor.call(this, {
      id: 'cardMaps'
      ,layout: 'border'
      ,border: false
            ,frame: false
      ,split: true
      ,contentEl: 'panelCenter'
      ,listeners: {
        resize: {
         fn: function(el) {
          if (Ext.get('cardMaps')!=null) {
           var s=Ext.get('panelCenter').parent().getSize();
           console.log('Resize   w:'+s.width+','+'h:'+s.height);
          }
         }
         ,scope: this
        }
       }
     
     });
     
     
     
    }  
    Ext.extend(SBS.Websites.ExtPWP.Map, Ext.Panel, {
     init: function() {
      var s=Ext.get('cardMaps').parent().getSize();
            this.map = new GMap2(document.getElementById("googleMap"),{
       size: new GSize(s.width,s.height)
      });
      console.log('Initial Draw   w:'+s.width+','+'h:'+s.height);
      this.map.setCenter(new GLatLng(50.7506,-1.92929));
      this.map.setZoom(15);
      this.map.addControl(new GLargeMapControl3D());
       this.map.addControl(new GMapTypeControl());
     
       this.map.addControl(new GScaleControl());
       this.map.enableContinuousZoom();
       this.map.enableScrollWheelZoom();
     
       this.map.checkResize();
     }
     
     });
    Thanks in advance for any help or advice you can give me!
    Rob

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,855
    Vote Rating
    88
      0  

    Default

    Advice?

    Start again.

    It's wrong right from ground level up, and there's too much to go through.
    Longtime Sencha engineer. Now surplus to requirements apparently...

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    419
    Vote Rating
    2
      0  

    Default

    Ah, clearly I have made a big mistake here. I take it I have completely misunderstood layouts?

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,855
    Vote Rating
    88
      0  

    Default

    Remove all HTML.

    Put a layout specification where you have a Panel which contains something.

    Nothing is resized unless its parent Container resized it.

    This is mentioned many times in the API docs, and I say it about 10 times every day here!

    But nothing ever changes.
    Longtime Sencha engineer. Now surplus to requirements apparently...

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    419
    Vote Rating
    2
      0  

    Default

    Yes I can see why that gets annoying, and I'm sorry to add to your pain!

    But I have followed your advice and have it working as I require. I added a 'fit' layout to the center region of my Viewport that contains my extended panel instance and now when I resize the browser window my panel resize event is firing nicely.

    I see how this is working now and why I didnt need that html in the first place!

    Thankyou for your help

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,855
    Vote Rating
    88
      0  

    Default

    OK, good start.

    Now consider that the map panel IS a Panel, can have a toolbar....

    Just configure it with region: 'center' and use it as the center. No point in having that extra layer of containment wit the overhead of layouting that introduces.
    Longtime Sencha engineer. Now surplus to requirements apparently...

  7. #7
    Sencha User
    Join Date
    Jun 2009
    Posts
    419
    Vote Rating
    2
      0  

    Default

    OK, when you say just configure it with a region of 'center' do you mean as part of the viewport config or in my code that defines the panel?

    At the moment I am already using this in the viewport config:

    Code:
     
    {
       region: 'center',
       layout: 'fit',
       items:[this.mapPanel]
       ,tbar: [config here...]  
    }
    In my panel config I am not configuring it with a region:

    Code:
     
    SBS.Websites.ExtPWP.Map.superclass.constructor.call(this, {
      id: 'mapPanel'
      ,border: false
      ,frame: false
    
         
     });
    I have added a region: 'center' config item to the panel code to see what happends but it makes no overall difference to the functionality. I guess I would need to do this if I started adding other items such as a toolbar etc, but in my case my toolbar is defined in the viewport center region config.

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,855
    Vote Rating
    88
      0  

    Default

    No. Read the sentence.
    Longtime Sencha engineer. Now surplus to requirements apparently...

  9. #9
    Sencha User
    Join Date
    Jun 2009
    Posts
    419
    Vote Rating
    2
      0  

    Default

    Ok so do you mean configure my custom panel object with region: 'center' and then just use that in my center region of my viewport code? Thats how Im interpreting what you say anyway.

    So I would end up with:

    Panel...
    Code:
     
    SBS.Websites.ExtPWP.Map.superclass.constructor.call(this, {
      id: 'mapPanel'
      ,border: false
      ,frame: false
      ,region: 'center'
         
    });
    Viewport...
    Code:
     
    {
       region: 'center',
       layout: 'fit',
       items:[this.mapPanel]
       ,tbar: [config here...]  
    }
    Sorry if im going round in circles here I just want to be sure I am using ExtJS in the correct way and not ending up getting into bad habits!

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,855
    Vote Rating
    88
      0  

    Default

    Configure the MapPanel with region: 'center'

    USE it as the center region.

    I don't know where else to go. Language seems to be breaking down.
    Longtime Sencha engineer. Now surplus to requirements apparently...

Posting Permissions

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