Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    India
    Posts
    25
    Vote Rating
    2
    _sench_user is on a distinguished road

      0  

    Default How to resize components (Rectangle for a case) ?

    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

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,334
    Vote Rating
    87
    sword-it is just really nice sword-it is just really nice sword-it is just really nice sword-it is just really nice

      0  

    Default put your draw container into window

    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..

    Code:
    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(); });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Location
    India
    Posts
    25
    Vote Rating
    2
    _sench_user is on a distinguished road

      0  

    Default

    Hi Sword,

    Thanks buddy its woking.
    You have solved my problem.

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Location
    India
    Posts
    25
    Vote Rating
    2
    _sench_user is on a distinguished road

      0  

    Default

    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

  5. #5
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,334
    Vote Rating
    87
    sword-it is just really nice sword-it is just really nice sword-it is just really nice sword-it is just really nice

      0  

    Default

    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.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  6. #6
    Sencha User
    Join Date
    Jun 2012
    Location
    India
    Posts
    25
    Vote Rating
    2
    _sench_user is on a distinguished road

      0  

    Default

    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?

Thread Participants: 1

Tags for this Thread