How to resize components (Rectangle for a case) ?

[_sench_user]

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

[sword-it]

Hi Sencha_user,

Put your draw container into panel or window and add config viewBox : true ( bydefault it is true) at draw container for example..

Ext.onReady(function(){
var drawComponent = Ext.create('Ext.draw.Component', {
   viewBox: true,
    resizable: true,
    items: [{
        type: 'rect',
        fill: '#ffc',
        x: 100,
        y: 100,
        anchor: '100%',
        width: 200,
        height: 200,
        id: 'circle',
        draggble: true}]
});

Ext.create('Ext.panel.Panel', {
    layout: 'fit',
    resizable:true,
    renderTo: Ext.getBody(),
    width: 200,
    height: 200,
    items: [drawComponent]
}).show();
});

[_sench_user]

Hi Sword,

Thanks buddy its woking.
You have solved my problem.

[_sench_user]

Hey Sword,

For a case if it is circle then how can we acheive it as panel or window are rectangular and it seems to be a circle in an a box.But i just want to resize just circle and as UI ,I want it will be containing circle only and on pulling the the edges of circle it will expand or shrink.
Sorry if I am asking something silly, its just the curiosity. Thanks buddy

[sword-it]

The Draw Component is a surface in which sprites can be rendered, draw component have resizable config so you can resize the draw component. you didn't resize sprite because it don't have resizable config.
Idea is put sprite into container and it's automatically resize according container width/height.

[_sench_user]

Ok, like if we want our circle or rectangle to be draggable then we need to just put them in container and set the config of container as draggble to true. Am i right? It will automaticaly adapt the property as according to container in that case?