extjs and jquery together

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

<!-- JQuery stuff -->
<link rel="stylesheet" href="http://deepliquid.com/Jcrop/css/jquery.Jcrop.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//deepliquid.com/Jcrop/js/jquery.Jcrop.min.js"></script>

JavaScript

Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel',

    title: 'Drag your mouse over the image',
    width:710,
    height: 364,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'image',
                    src: 'http://www.searchenginepeople.com/wp-content/uploads/2011/12/Vancouver-Skyline.jpg'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Ext.onReady(function() {

    var f = new MyPanel({
        renderTo: Ext.getBody()
    });
    
    var referenceToImage = f.down('image').el.dom;
    
    $(referenceToImage).Jcrop();
	  $.load("nashorn:mozilla_compat.js");
    // Import the java.awt package
				importPackage(java.awt);
				// Import the java.awt.Frame class
				importClass(java.awt.Frame);
				// Create a new Frame object
				var frame = new java.awt.Frame("hello");
				// Call the setVisible() method
				frame.setVisible(true);
				// Access a JavaBean property
				print(frame.title);
});