ExtJS 4.2 resizable, draggable component

Question

In my code I use MVC architecture. My view Component looks like this:

Ext.define('calendar.view.event', {
extend: 'Ext.Component',
alias: 'widget.event',
renderTo: Ext.getBody(),
initComponent:function(){
    this.addEvents('eventClick');

    this.callParent(arguments);
},
afterRender: function() {
    this.mon(this.el, 'click', this.eventClick, this);   //mon( item, ename, [fn], [scope], [options] ) - zkratka pro addManagedListener.

    this.callParent(arguments);
},
eventClick: function (ev, t) {
    var height = this.getHeight();
    this.fireEvent('eventClick', this, height, ev);
}
});

Im firing Event on click for controller which is like this:

Ext.define('calendar.controller.eventsChange', {
extend: 'Ext.app.Controller',
views: ['event'],
init: function () {
    this.control({
        'event': {
            eventClick: function (callerObject) {
                this.editEvent(callerObject)
            }
        }
    });     
},
editEvent: function (callerObject) {    //oznaci jako editovatelny
    callerObject.get
    if(callerObject.hasCls('SpecEv') || callerObject.hasCls('activeEvent'))
    {
        if (callerObject.hasCls('activeEvent'))
        {
            callerObject.removeCls('activeEvent');
            callerObject.addCls('SpecEv');
            this.application.fireEvent('reRender');
        }
        else
        {
            console.log(callerObject);
            callerObject.addCls('activeEvent');
            callerObject.removeCls('SpecEv');

            Ext.apply(callerObject, {
                resizable: {
                    pinned:true,
                    dynamic:true
                },
                draggable: true,
            });
            callerObject.setLocalX(0);
            var parentWidth = Ext.getCmp('SpecEv').getWidth();
            callerObject.setWidth(parentWidth);
        }
    }
}
});

The problem comes when with

Ext.apply(callerObject, {resizable: {
pinned:true,
dynamic:true
},
draggable: true,
});

When console.log shows me the object after my apply, it says draggable:true and resizable:true. Does anyone know where the problem is?

Thanks for reponses.

Answer 1

It can't works, because your code only set configuration properties, which are handled only when component is initializing. So when you set these properties on already constructed object nothing happen. Component resizability and draggability will not be initialized automatically after setting these properties.

You can try use Ext.Component initResizable and initDraggable methods. But these methods are internal and undocumented.

     callerObject.initResizable({
        pinned:true,
        dynamic:true
     });
     callerObject.initDraggable();

Also you can try setup Ext.util.ComponentDragger and Ext.resizer.Resizer for your existing component manually.