Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: read x and y coordinate in Panel

  1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default read x and y coordinate in Panel

    Hello,
    I would read the coordinate x and y in Panel where the mouse of user makes click.
    I use the "getXY()" method, but this return the coordinate x and y on the page, not on the panel.
    My Panel have the right and button scroll bar, when the user scroll Panel, the coordinate returned from "getXY()" method are wrong, because do not take into account the scroll panel.
    I read APi doc but I have not found anything that can help me. Some have suggested?

    My code now is:
    Code:
    ....
    notifyDrop : function(dd, e, data){
    	var selectedRecord = dd.dragData.selections[0];
    	var coords = e.getXY();
    	alert("x"+coords[0]+" y "+coords[1]);
    	}
    ....
    I read the post of Animal http://extjs.com/forum/showthread.php?t=78398, but I was not useful to solve my problem.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    What's this with DD code?

    A click you'd handle with a simple click event handler on the Panel's body

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    I then place the event "click" on the panel and then read the coordinates with "getXY?

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    IS there a click event on Panel?

    No.

    So Panel's body

    As I told you.

  5. #5
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    I'm Sorry. I did not understand.
    I have a Panel. And in the listener of Panel, I use "active" for recall some functions. For one of these functions, I read the coordinates x and y of user click mouse, for pass them as parameters to the function.
    My code is:
    Code:
    var AreaCentrale = new Ext.TabPanel({
    	id: 'contenitoreMaster',
    	region:'center', deferredRender:true, enableTabScroll:true,	autoScroll:true, activeTab:0, split: true,
    	items:[{
    		title: 'titolo',
    		contentEl: 'idGenericTitoloGriglia',
    		iconCls: 'nuova',
    		closable:false,
    		autoScroll: true,
    		id: 'Genericidtitolo',
    		listeners: {
    		activate : function(){
    					....
    					var coords = e.getXY();
    					activeVirtualPrompt(coords[0],coords[1]);		
    					......			
    																		
    	        			}
    				}
    		}]
    how should I modify this code?

  6. #6
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    for use Panel's body?

  7. #7
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    @TAG -- You'll want to set a listener on the Panel's body once after the Panel is rendered. (The Component::mon method safely removes the listener (preventing memory leaks) for your when the Panel is destroyed):

    Code:
    var AreaCentrale = new Ext.TabPanel({
        id: 'contenitoreMaster',
        region:'center', deferredRender:true, enableTabScroll:true,
        autoScroll:true,    <- Not valid for a tabPanel
        activeTab:0, split: true,
        items:[{
            title: 'titolo',
            contentEl: 'idGenericTitoloGriglia',
            iconCls: 'nuova',
            closable:false,
            autoScroll: true,
            id: 'Genericidtitolo',
            onBodyClick : function( e, target){
                 var coords = e.getXY();
                 activeVirtualPrompt(coords[0],coords[1]);        
                    ...... 
            },
            listeners: {
               render : function(P){
                     P.mon(P.body, 'click', P.onBodyClick, P);
                 }
            }
        }]
    Then, you don't have to worry about parent scrollBar offsets, since you're dealing with the body Element only.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  8. #8
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    I update my code, with your code, but my application don't run correctly. The contentEl of Panel don't Upload the div correctly.
    I insert the other event in listener in "/*" and "*/" and the code now is:
    Code:
    var AreaCentrale = new Ext.TabPanel({//definisco un pannello di tipo Tab
    	id: 'contenitoreMaster',
    	region:'center', deferredRender:true, enableTabScroll:true,	autoScroll:true, activeTab:0, split: true,
    	items:[{
    		title: 'titolo',
    		contentEl: 'idGenericTitoloGriglia',
    		iconCls: 'nuova',
    		closable:false,
    		autoScroll: true,
    		id: 'Genericidtitolo',
    		onBodyClick : function(e,target){
                		var coords = e.getXY();
                		alert(coords[0]+' - '+ coords[1]); //to test the correct x and y
           		},
    		listeners: {
    		
    			render : function(P){
                    		P.on(P.body, 'click', P.onBodyClick, P);
               		 }
    		}//chiudo listeners
    	   }//chiudo secondo pannello				
    		]
    	})
    the html is
    HTML Code:
    .griglia{
        background-image: url("griglia.jpg");
        width:8000px;
    	height:8000px;
        overflow:visible;	
    }
    ...
    <body id="DIO">
    		<div  id="idGenericTitoloGriglia" class="griglia">
    		</div>
    	</body>
    ....
    the CSS don't view the image. And the alert don't run......

  9. #9
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    ok, in mozzilla, don't run, in google chrome yes......compatibility problem????

  10. #10
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    sorry,
    but the coordinate x and y, not take into account the scroll ...... I have the same error above .....

Page 1 of 2 12 LastLast

Posting Permissions

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