extjs的头像截图功能的实现

在做截图功能之前，在百度搜索，居然没发现extjs的头像截取例子，在完成这个以前，差点郁闷死。

做了半个月，自己研究，找人问，总算是搞出了属于我们自己的extjs的例子，分享给和我一样苦逼的程序员。

转做extjs头像截图功能，第一天，熟悉了下代码。整理了思路。发现extjs截图功能的实现，有些困难。因网上很难找到类似的代码，最后总结了下实现方案：

从插件着手，先从网上找了一大堆截图插件，发现使用最好，最合适ext的插件以jcrop插件最好。
官网地址：http://deepliquid.com/content/Jcrop_Download.html

插件了解完成，就进行插件的导入，引用。
第一步，先把jquery.Jcrop.css插件放入你想要引用的路径，这看你想放在那，记得要进行绝对路径的引用。

而jquery.min.js和jquery.jcrop.js，按照一般来说，可以直接放到你某一个文件夹里，然后引用，但是我经过多次测试，发现，他并没有引用到，后来，想了一个折中的办法，直接把这两个js的代码放入了js页面。这办法，对性能影响不大，就是代码多，比较繁重。

OK，万事具备，只欠代码：
接下来就要写代码，进行头像截图的实现，

items : [{
        xtype : 'filefield',
        name : 'file',
        fieldLabel : "附件上传",
        buttonText:"浏览",
        labelWidth : 80,
        columnWidth : 1,
        allowBlank : false,
        buttonConfig:{iconCls:'file'},
        listeners:{
            afterrender : function(){
                jQuery(function cutImage(){
                    $('#target').Jcrop({
                          boxWidth:   450,minWidth:300,
                          boxHeight:  600,minHeigth:400,
                          onChange:   showCoords,
                          onSelect:   showCoords,

 onRelease:  clearCoords
                        },function(){
                         var bounds = this.getBounds();  
                         boundx = bounds[0];  
                         boundy = bounds[1];
                         jcrop_ap