Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Value in editor dialogForm not selected onFocus

    Hi,

    SC_SNAPSHOT-2011-03-17/EVAL Deployment
    FireFox 3.6.15

    The value in my custom editor dialog form is not selected!
    Both focusInItem() and selectValue() aren't working.

    Use case: when user wants to edit the value through the dialog box.
    The value in the first field of the dialog form should be selected.

    Repo case, click the edit icon. DialogForm appears, the value of the input field is not selected.

    Strange thing, when opening the dialog form for the second time, the value is selected.

    I have added a stand alone test case below:

    Code:
    public class Standalone implements EntryPoint {
    		
    	private static Canvas masterPanel = null;
    	
    	public void onModuleLoad() {
    		 
    		//masterPanel should be a Layout
    		masterPanel = new Canvas(); 
    		masterPanel.setHeight100();
    		masterPanel.setWidth100();
    		masterPanel.setStyleName("pageBackground"); //background style from skin
    		
    		masterPanel.addChild(testCase1());
    		masterPanel.draw();	
    	}
    
    	    public DynamicForm testCase1() {   
    	  	  
    	        DataSource dataSource = new DataSource();   
    	  
    	        DataSourceField myTextField = new DataSourceField();   
    	        myTextField.setName("textField");   
    	        myTextField.setTitle("textField");   
    	        myTextField.setType(new MyTextType());   
    	        myTextField.setEditorType(new MyTextEditor());
    	  
    	        dataSource.setFields(myTextField);   
    	          
    	        DynamicForm form = new DynamicForm();   
    	        form.setHeight(170);   
    	        form.setWidth(500);
    	        form.setDataSource(dataSource);
    	        form.setValue("textField", 100);
    	   
    			return form;
    	    }
    
       public static class MyTextType extends SimpleType {   
            public MyTextType() {   
                super("myTextType", FieldType.ANY);   
     
            }   
        }  
        
        private class MyTextEditor extends TextItem {
    
        	private Dialog dialog;
    
        	public MyTextEditor() {
        		super();
        		setSelectOnFocus(true);
        		
        		FormItemIcon icon = new FormItemIcon();
        		icon.setSrc("[SKIN]/actions/edit.png");
        		
        		//remove icon from tabIndex: if we don't do this, this gives troubles with the onBlur and onFocus events +
        		//we can never actually leave the field and tab to the next field :-/ 
        		icon.setTabIndex(-1);    		
        		setIcons(icon);
        		setShowIcons(true);
        		   		
        		addIconClickHandler(new IconClickHandler() {
    
        			public void onIconClick(IconClickEvent event) {
        				// get global coordinates of the clicked picker icon
        				Rectangle iconRect = getIconPageRect(event.getIcon());
    
        				Object source = event.getSource();
    
        				if (source != null) {
        					MyTextEditor editor = (MyTextEditor) source;
    
        					// show the picker dialog
        					if (iconRect != null) {
        						showDialog(event.getItem(), iconRect.getLeft(), iconRect.getTop());
        					} else {
        						showDialog(event.getItem(), EventHandler.getX(), EventHandler.getY());
        					}
        				}
        			}
    
        		});
    
        	}
        	
        	private void showDialog(final FormItem item, int left, int top) {
        		
        		if (dialog == null) {
        			createDialog(item, (Integer) item.getValue());
        		}    		
    
        		// don't put dialog outside pageRight
        		if (left + dialog.getWidth() > Page.getWidth()) {
        			left = Page.getWidth() - dialog.getWidth() - 5; // margin
        			if (left < 0)
        				left = 5;
        		}
        		// don't put dialog outside pageBottom
        		if (top + dialog.getHeight() > Page.getHeight()) {
        			top = Page.getHeight() - dialog.getHeight() - 5; // margin
        			if (top < 0)
        				top = 5;
        		}
        		dialog.moveTo(left, top);
        		dialog.show();
        	}
        	
        	private void createDialog(final FormItem item, final Integer enteredValue) {
    
        		dialog = new Dialog();
        		dialog.setDismissOnEscape(true); // close on esc (not working?)
        		dialog.setDismissOnOutsideClick(true); // close when clicked outside
        		dialog.setAutoCenter(true);
        		dialog.setIsModal(true);
        		dialog.setShowEdges(false);
        		dialog.setBorder("1px solid #555555"); // show a line around the box
        		dialog.setShowHeader(false);
        		dialog.setShowToolbar(false);
        		dialog.setAutoSize(true);
        		dialog.setBackgroundColor("#FFFFFF"); // without this you could see true
        		
        		// the dialog in some browsers
    
        		final DynamicForm dialogForm = new DynamicForm();
    
        		final TextItem txtRefAmount = new TextItem("input");
        		txtRefAmount.setSelectOnFocus(true);
        		txtRefAmount.setTitle("Amount");
        		txtRefAmount.setValue(enteredValue);
        		
        		txtRefAmount.addFocusHandler(new FocusHandler() {
    				
    				public void onFocus(FocusEvent event) {
    					//both methods aren't working!
    //					txtRefAmount.selectValue();
    					txtRefAmount.focusInItem();
    				}				
    			});
    
        		dialogForm.addSubmitValuesHandler(new SubmitValuesHandler() {
        			public void onSubmitValues(SubmitValuesEvent event) {
        					dialog.hide();	
        			}
        		});
        		
        		dialogForm.addVisibilityChangedHandler(new VisibilityChangedHandler() {
    
        			public void onVisibilityChanged(VisibilityChangedEvent event) {
        				if (event.getIsVisible()) {
        					//this is not working!!!
        					txtRefAmount.selectValue();
        				}
        			}
        		});
    
        		final ButtonItem btnItem = new ButtonItem("Ok");
        		btnItem.addClickHandler(new com.smartgwt.client.widgets.form.fields.events.ClickHandler() {
    				
    				public void onClick(com.smartgwt.client.widgets.form.fields.events.ClickEvent event) {				
    					dialogForm.submit();
    				}			
        		});
        		btnItem.setColSpan(2);
        		btnItem.setAlign(Alignment.RIGHT);
        		btnItem.setWidth(100);
    
        		dialogForm.setItems(txtRefAmount, btnItem);
    
        		dialog.addItem(dialogForm);
        		dialog.setVisibility(Visibility.HIDDEN);
        		dialog.draw();
        		
        	}
        	
        }
    }

    #2
    It looks like this is a timing issue to do with when the form item's native element value gets set and when selectValue() is called.

    It'd probably be possible to get it working with this approach but the easiest thing to do is
    - drop the focusHandler and the visibilityChanged handler
    - call dynamicForm.setAutoFocus(true) - this causes the form to receive focus when it gets drawn
    - call item.setSelectOnFocus(true) - this causes the item to select it's full set of text when it gets given focus (happens when it gets drawn).

    Let us know if this doesn't get it working for you.
    Last edited by Isomorphic; 22 Mar 2011, 11:06.

    Comment


      #3
      Alright, that seems to do the trick!

      Thanx
      Bart

      Comment

      Working...
      X