ExtJS4 DragDrop Proxy позиционирование

Question

В ExtJS 4 по умолчанию прокси перетаскивания отображается справа внизу от позиции мыши во время операции перетаскивания. Допустим, я щелкаю в центр моей цели и двигаю мышь на 1 пиксель. Я хотел бы, чтобы прокси сам по себе над исходным элементом, смещенным на 1 px.

По сути, мне нужно, чтобы прокси вел себя как в примере с http://jqueryui.com/demos/draggable/#sortable. В этом примере прокси находится над исходным элементом, а затем перемещается при перетаскивании мыши.

Как мне этого добиться?

Вот пример кода, иллюстрирующий проблему при перетаскивании пользовательского виджета.

Ext.onReady (функция () {

    var hewgt = Ext.define('Demo.widget.Complex', {
                    extend: 'Ext.panel.Panel',
                    alias: 'widget.complex',
                    frameHeader: false,
                    draggable: false, 
                    layout: 'table',
                    initComponent: function() {
                            this.callParent(arguments);
                            var txtFld;
                            this.superclass.add.call(this, txtFld = new Ext.form.field.Text({fieldLabel:'test'}));
                            this.superclass.add.call(this, new Ext.button.Button({text:'Save'}));                              
                    }
    });

    Ext.define('Demo.dd.DragSource', {
                    extend: 'Ext.dd.DragSource',
                    b4MouseDown: function(e) {
            this.diffX = e.getX() - this.el.getX();
            this.diffY = e.getY() - this.el.getY();
                            this.superclass.setDelta.call(this, 0, 0);
                    },
                    getTargetCoord: function(iPageX, iPageY) {
                            return {x: iPageX - this.diffX, y: iPageY - this.diffY};
                    }
    });

    var panel = Ext.create('Ext.panel.Panel', {
                    layout: 'absolute',
                    title: 'Navigation'
    });

    var vp = Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [panel]
    });

    var img = Ext.create('Demo.widget.Complex', { width: 400, height:100, x:20, y:20 });
    panel.add(img);
    new Demo.dd.DragSource(img.getEl());

    img = Ext.create('Demo.widget.Complex', { width: 400, height:100, x:20, y:150 });
    panel.add(img);
    new Demo.dd.DragSource(img.getEl());

});

Я новичок в Ext JS. Пожалуйста, дайте мне знать, как правильно разместить перетаскиваемый прокси?

Спасибо