I am just newbie to ExtJs, i want to know how to resize a rectangle by pulling its side by mouse pointer. I have tried something like this :

Ext.onReady(function(){
var drawComponent = Ext.create('Ext.draw.Component', {
viewBox: false,
renderTo: Ext.getBody(),
resizable: {
dynamic: true,
handles: 'all',
layout: 'fit',
widthIncrement: 20,
minWidth:50,
minHeight: 50,
preserveRatio: true
},
items: [{
type: 'rect',
fill: '#ffc',
x: 100,
y: 100,
anchor: '100%',
width: 200,
height: 200,
id: 'circle',
draggble: true
}]
});
});

But its not woking, its only rezise the outside container that contains rectangle but NOT the actual rectangle.Please help me for the same, Thanks in advance