Results 1 to 3 of 3

Thread: Draggable Component inside a Draggable Component Problems and Label Resizing Problem

  1. #1
    Sencha User
    Join Date
    Aug 2010

    Default Draggable Component inside a Draggable Component Problems and Label Resizing Problem


    I have 2 problems about draggable and resizable.

    I have a FieldSet, a Label and a TextField
    They are all resizable and draggable
    Label and TextField are the child elements of FieldSet and they can be only dragged inside the FieldSet
    Dragging the FieldSet are also moving the child elements. It means the childs' coordinates are stick to FieldSet
    While dragging the Label and TextField, the FieldSet should not be dragged and stay as same position.

    I use Draggable and Resizable for those Component shown in the code below.
    However, I have fail to do such effect.

    My problems are:
    1. Cannot resize a Label when the label is located inside the FieldSet
    2. When i drag the Label and TextField, the FieldSet is dragged also.
    3. It seems that the TextField in the FieldSet cannot be dragged around the FieldSet

    For Problem 2, I have tried to use swallowEvent to stop dragging the FieldSet when drag with Label and TextField.
    However, I have no clue on how to implement it.

    Can anybody give me some hints on this case? Thanks

    import com.extjs.gxt.ui.client.fx.Draggable;
    import com.extjs.gxt.ui.client.fx.Resizable;
    import com.extjs.gxt.ui.client.widget.Label;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.form.FieldSet;
    import com.extjs.gxt.ui.client.widget.form.TextField;
    import com.extjs.gxt.ui.client.widget.layout.AbsoluteLayout;
    public class Test implements EntryPoint {
        public void onModuleLoad() {        
            LayoutContainer layoutContainer = new LayoutContainer();        
            layoutContainer.setSize(500, 500);
            layoutContainer.setLayout(new AbsoluteLayout());
            Label outerLabel = new Label("Label outside FieldSet");
            TextField<String> outerTextField = new TextField<String>();
            outerTextField.setEmptyText("TextField outside FieldSet");
            FieldSet fieldSet = new FieldSet();
            fieldSet.setHeading("Field Set");
            fieldSet.setSize(450, 300);
            Label innerLabel = new Label("Label inside FieldSet");        
            TextField<String> innerTextField = new TextField<String>();
            innerTextField.setEmptyText("TextField inside FieldSet");
            Resizable resize = new Resizable(outerLabel);
            resize = new Resizable(outerTextField);
            resize = new Resizable(fieldSet);
            resize = new Resizable(innerLabel);
            resize = new Resizable(innerTextField);
            Draggable drag1 = new Draggable(outerLabel);
            drag1 = new Draggable(outerTextField);
            drag1 = new Draggable(fieldSet);
            Draggable drag2 = new Draggable(innerLabel);        
            drag2 = new Draggable(innerTextField);

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2007


    1) and 3) You need to add a correct handle to start the drag. If the hole componenti s the handle than it will start dragging too. You can also listen to the dragstart event and cancel this, if the real target was the label and not the fieldset.

    2) You will need to call preventDefault in a OnMouseDown event listener for this. This can also be found using the forum search.

  3. #3
    Sencha User
    Join Date
    Feb 2015

    Default Parent container getting dragged on drag of child container.

    I have tried using preventDefault and stopPropagation but to no avail. I have a draggable container within a draggable container. Sometimes (randomly) it so happens that on trying to drag the child container the parent container gets dragged along. I have implemented drag behaviour through DragZone. I have tried all sorts of hacks but they don't seem to work.

    Could someone please help me out with a solution for this?

Similar Threads

  1. How does a Window extend the Panel and add resizing/draggable?
    By Litre in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 25 Jul 2010, 7:06 AM
  2. resizable/ draggable problems
    By Ciary in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Apr 2009, 4:57 AM
  3. Draggable Textfield with Label
    By Pmithrandir in forum Ext GWT: Help & Discussion (1.x)
    Replies: 7
    Last Post: 10 Dec 2008, 7:22 AM
  4. Draggable Panels - Want All Of Panel To Be Draggable
    By NeonMonk in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 25 Jul 2008, 9:56 PM
  5. Help,problems with draggable panels
    By dave26540 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 7 Jul 2008, 10:51 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts