Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    394
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Question Panel Resize Event 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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Advice?

    Start again.

    It's wrong right from ground level up, and there's too much to go through.

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    394
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default


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

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

      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.

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    394
    Vote Rating
    2
    parky128 is on a distinguished road

      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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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.

  7. #7
    Sencha User
    Join Date
    Jun 2009
    Posts
    394
    Vote Rating
    2
    parky128 is on a distinguished road

      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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    No. Read the sentence.

  9. #9
    Sencha User
    Join Date
    Jun 2009
    Posts
    394
    Vote Rating
    2
    parky128 is on a distinguished road

      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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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.

Thread Participants: 1