1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    25
    Vote Rating
    0
    akshar_jamgaonkar is on a distinguished road

      0  

    Default Answered: Find center co-ordinates of browser / Viewport

    Answered: Find center co-ordinates of browser / Viewport


    Hello Guys,
    Iam displaying a pop-up wiondow, and want it to display always at the center even if i re-size the browser. I have used the .center method , which is not working if i re-size the browser. I want to get X, Y co-ordinates of the browser and to the window x , y property want to set it.

    Any help would be appriciated,


    Thanks,

  2. Take a look at Ext.EventManager.onWindowResize().

    I typically register my Window with the EventManager in the Window's afterrender event, then remove the listener before close. Here's a functional example, where you can substitute the centerMe() function for a globally scoped/shared function for efficiency.

    Code:
    Ext.create('Ext.window.Window', {
      height: 200,
      title: 'Auto-centering Window',
      width: 200,
      centerMe: function() {
        this.center();
      },
      listeners: {
        afterrender: function(component, eOpts) {
          Ext.EventManager.onWindowResize(this.centerMe, component);
        },
        beforeclose: function(component, eOpts) {
          Ext.EventManager.removeResizeListener(this.centerMe, component);
        }
      }
    }).show();

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    25
    Vote Rating
    0
    akshar_jamgaonkar is on a distinguished road

      0  

    Default


    Hi i checked the link you gave but the results are not accurate, when i use the code..... could you suggest as to what may be the problem. when i run the code on my monitor i get the x = 347.5 and Y = 576 , but this is not the center co-ordinates....of my monitor

  5. #4
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Vote Rating
    42
    Answers
    44
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      1  

    Default


    Center method works for me:
    Code:
    var win = Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: 'fit',
        items: {  
            xtype: 'grid',
            border: false,
            columns: [{header: 'World'}],                 
            store: Ext.create('Ext.data.ArrayStore', {}) 
        }
    }).show();
    
    Ext.EventManager.onWindowResize(function () {    
        win.center();
    });
    ‚Äč
    live http://jsfiddle.net/LTv7E/1/

  6. #5
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    Answers
    106
    friend has a spectacular aura about friend has a spectacular aura about

      3  

    Default


    Take a look at Ext.EventManager.onWindowResize().

    I typically register my Window with the EventManager in the Window's afterrender event, then remove the listener before close. Here's a functional example, where you can substitute the centerMe() function for a globally scoped/shared function for efficiency.

    Code:
    Ext.create('Ext.window.Window', {
      height: 200,
      title: 'Auto-centering Window',
      width: 200,
      centerMe: function() {
        this.center();
      },
      listeners: {
        afterrender: function(component, eOpts) {
          Ext.EventManager.onWindowResize(this.centerMe, component);
        },
        beforeclose: function(component, eOpts) {
          Ext.EventManager.removeResizeListener(this.centerMe, component);
        }
      }
    }).show();

  7. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    25
    Vote Rating
    0
    akshar_jamgaonkar is on a distinguished road

      0  

    Default That Worked,,,,

    That Worked,,,,


    Hey redraid and friend ... both of your solutions worked.... thanks a lot......