Results 1 to 3 of 3

Thread: Editable Cell in Tree does not get focus

  1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    17

    Default Editable Cell in Tree does not get focus

    I have added a Cell with input textbox into Tree node. When I click on the input Textbox to enter the text, the input textbox loses the focus instantly, so, I am not able to type anything. When I try trace the events, I noticed the "blur" event is fired immediately followed by "click" event. I think, because pf blur event, the input textbox loses the focus. But, I am not sure why does the "blur" get fired for "click" event. Do you have any suggestion to overcome this issue?

    Cell code is below:
    Code:
    import com.google.gwt.cell.client.AbstractCell;import com.google.gwt.cell.client.ValueUpdater;
    import com.google.gwt.dom.client.Element;
    import com.google.gwt.dom.client.NativeEvent;
    import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
    import com.gwt.demo.client.gxt.model.BaseDto;
    
    
    public class EditableTreeCell extends AbstractCell<BaseDto> {
    
    
        public EditableTreeCell() {
            super("change", "blur", "click", "keydown");
        }
    
    
        @Override
        public void render(com.google.gwt.cell.client.Cell.Context context,
                BaseDto value, SafeHtmlBuilder sb) {
                sb.appendHtmlConstant("<div style=\"widht:100%;\">");
                sb.appendHtmlConstant("<span id=\"labelId\">");
                sb.appendHtmlConstant(value.getName());
                sb.appendHtmlConstant("</span>");
                sb.appendHtmlConstant("<input id=\"textInputId\" type=\"text\"/ style=\"width:200px;\">");
                sb.appendHtmlConstant("</div>");
        
        }
        @Override
        public void onBrowserEvent(Context context, Element parent, BaseDto value,
            NativeEvent event, ValueUpdater<BaseDto> valueUpdater) {
            
          // Check that the value is not null.
          if (value == null) {
            return;
          }
          
          // Call the super handler, which handlers the enter key.
          super.onBrowserEvent(context, parent, value, event, valueUpdater);
          
           
          final Element targetElement = event.getEventTarget().cast();
          
          System.out.println("Event=" + event.getType() +"  KeyCode=" + event.getKeyCode()   + "   Element=" + targetElement.getId());
        }
        
       
    }
    Tree code snippet is below:
    Code:
         final Tree<BaseDto, BaseDto> tree = new Tree<BaseDto, BaseDto>(store, new ValueProvider<BaseDto, BaseDto>() {
    
            @Override
            public BaseDto getValue(BaseDto object) {
              return object;
            }
    
    
            @Override
            public void setValue(BaseDto object, BaseDto value) {
            }
    
    
            @Override
            public String getPath() {
              return "name";
            }
          });
          
          tree.setAllowTextSelection(true);
          tree.setCheckable(true);
          EditableTreeCell cell = new EditableTreeCell();
    
    
          tree.setCell(cell);
          tree.setWidth(300);
          tree.getStyle().setLeafIcon(ExampleImages.INSTANCE.music());

    The output printed in the console is below for input textbox click
    Code:
    Event=click  KeyCode=0   Element=textInputIdEvent=blur  KeyCode=0   Element=textInputId

    Tree is looking like below in the browser
    2014-09-06_15-40-37.png

  2. #2
    Sencha User
    Join Date
    Jan 2015
    Posts
    29

    Default

    I also encountered this issue. Did you solve it?

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    17

    Default

    I ended up using EditableTreeGrid - http://www.sencha.com/examples/#Exam...itabletreegrid

Tags for this Thread

Posting Permissions

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