Custom editor component for TreeGrid / DynamicForm?

[dancalvert]

Hi there,
I currently have a fairly straightforward TreeGrid, with a DynamicForm attached (to the same datasource) in such a way that selecting a row in the tree grid allows you to view/edit the details for that record, in the dynamic form.
Each of the fields in the datasource is stored as text, however what I want to do is to be able to edit that text with something more advanced... for example, I have a field that is storing an arithmetic formula string. Rather than forcing the user to type "a+b" in a textbox, I'd like to pop up my own dialog with a little custom formula builder editor, which gives the user a nicer way to build their formula, and then puts the resulting string back in the text field.
So far, I can't figure out how to get this working... I built a custom editor that extends TextItem, but if I instantiate that in the DataSource as the editor type as follows, the app loads up entirely blank (otherwise, the app loads fine):

 DataSourceTextField forecastFormula = new DataSourceTextField("forecast", "Assumption");
 forecastFormula.setEditorType(new CustomFormulaPickerItem());

Where the CustomFormulaPickerItem is currently just a simple popup modelled after the CustomPicker example in the showcase:

import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.form.fields.FormItemIcon;
import com.smartgwt.client.widgets.form.fields.events.IconClickHandler;
import com.smartgwt.client.widgets.form.fields.events.IconClickEvent;
import com.smartgwt.client.widgets.Dialog;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.core.Rectangle;

import java.util.Map;
import java.util.HashMap;

/**
 * todo document me [dc] ...
 *
 * @author Dang Calvert
 */
public class CustomFormulaPickerItem extends TextItem {

  // Constants ---------------------------------------------------------------------------------------------- Constants

  // Instance Variables ---------------------------------------------------------------------------- Instance Variables
  private static Dialog dialog;
  private static CustomFormulaPickerItem currentEditor;


  // Constructors ---------------------------------------------------------------------------------------- Constructors
    // set the specified value and dismiss the picker dialog
    private static void setCurrentValue(String value) {
      currentEditor.setValue(value);
      dialog.hide();
    }

    // show the picker dialog at the specified position
    private static void showDialog(int left, int top) {
      dialog.show();
      dialog.moveTo(left, top);
    }

    public CustomFormulaPickerItem() {
      //use default trigger icon here. User can customize.
      //[SKIN]/DynamicForm/default_formItem_icon.gif
      FormItemIcon formItemIcon = new FormItemIcon();
      setIcons(formItemIcon);

      addIconClickHandler(new IconClickHandler() {
        public void onIconClick(IconClickEvent event) {

          // get global coordinates of the clicked picker icon
          Rectangle iconRect = getIconPageRect(event.getIcon());

          // lazily create the YesNoMaybe picker dialog the first time a yesNoMaybe editor is clicked
          if (CustomFormulaPickerItem.dialog == null) {
              CustomFormulaPickerItem.makeDialog();
          }
          // remember what editor is active, so we can set its value from the picker dialog
          CustomFormulaPickerItem.currentEditor = CustomFormulaPickerItem.this;

          // show the picker dialog
          CustomFormulaPickerItem.showDialog(iconRect.getLeft(), iconRect.getTop());
        }
      });

    }
  // Public Methods ------------------------------------------------------------------------------------ Public Methods

  // Protected Methods ------------------------------------------------------------------------------ Protected Methods

  // Private Methods ---------------------------------------------------------------------------------- Private Methods
  private static void makeDialog() {
    dialog = new Dialog();


    dialog.setAutoCenter(true);
    dialog.setIsModal(true);
    dialog.setShowHeader(false);
    dialog.setShowToolbar(false);
    dialog.setWidth(130);
    dialog.setHeight(110);

    Map bodyDefaults = new HashMap();
    bodyDefaults.put("layoutMargin", 10);
    bodyDefaults.put("membersMargin", 10);
    dialog.setBodyDefaults(bodyDefaults);

    final Button ok = new Button("Test");
    ok.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {
        public void onClick(com.smartgwt.client.widgets.events.ClickEvent event) {
            CustomFormulaPickerItem.setCurrentValue("a+b");
        }
    });

    final Button cancel = new Button("Cancel");
    cancel.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {
        public void onClick(com.smartgwt.client.widgets.events.ClickEvent event) {
           // CustomFormulaPickerItem.setCurrentValue(no.getTitle());  
        }
    });



    dialog.addItem(ok);
    dialog.addItem(cancel);

  }



  // Getters & Setters ------------------------------------------------------------------------------ Getters & Setters

} // end of class

To be honest, it doesn't matter to me whether the custom editor pops up straight from the TreeGrid view, or whether it's on the Details form (or whether it can be done from both places). But at the moment, it doesn't seem to be working with either one.
Any suggestions?

thanks
Dan

[Isomorphic]

There must be some kind of JavaScript error if the app is loading blank. Can you use Firebug and the Developer Console to get information on the error, and post it?