1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    24
    Vote Rating
    0
    poporogue is on a distinguished road

      0  

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

    Draggable Component inside a Draggable Component Problems and Label Resizing Problem


    Hi

    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

    Code:
    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;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    
    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");
            fieldSet.add(innerLabel);        
            fieldSet.add(innerTextField);
            
            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.setContainer(layoutContainer);
            drag1 = new Draggable(outerTextField);
            drag1 = new Draggable(fieldSet);
            
            Draggable drag2 = new Draggable(innerLabel);        
            drag2.setContainer(fieldSet);
            drag2 = new Draggable(innerTextField);
            
            layoutContainer.add(outerLabel);
            layoutContainer.add(outerTextField);
            layoutContainer.add(fieldSet);        
            
            RootPanel.get().add(layoutContainer);
    
        }
    
    }

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    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.

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

Thread Participants: 1