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(); });
<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>