Using ExtJS and JQuery on the same page

This widget shows an ExtJS Panel and Image component, along with the JQuery DeepLiquid JCrop widget, which allows you to select a crop area on an image.

Try it out by dragging your mouse over the image. You can also move the "crop" around.

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

});