I wonder why the first block of the code works good, but the second is not!

 <ext:Button runat="server" ID="btnCalculateCoordinates" >
   <Listeners>
         <Click Handler="#{DirectMethods}.CalculateCoordinates()"></Click>
     </Listeners>
 </ext:Button>


//code behind
[DirectMethod]
public void CalculateCoordinates() { //............. }




In the this case the furebug says Ext.net.DirectMethods.CalculateCoordinates is not a function
<script type="text/javascript">
function calculateCoordinates() {
        Ext.net.DirectMethods.CalculateCoordinates();
}
 <ext:Button runat="server" ID="btnCalculateCoordinates" >
   <Listeners>
         <Click Fn="calculateCoordinates"></Click>
     </Listeners>
 </ext:Button>


//code behind
[DirectMethod]
public void CalculateCoordinates() { //............. }