Announcement

**jventuri** · 20 Sep 2010, 12:50

Any feedback on this? - I am also interested in a resolution.

**sjivan** · 21 Sep 2010, 03:30

So the DynamicForm works and calling getValue() on the CustomTextItem also returns the correct value. You're only having an issue with FilterBuilder, right?

Can you post a screenshot of sample because it appears from your description that you are seeing your custom text item in the FilterBuilder while I'm not.

Sanjiv

**cjustice** · 21 Sep 2010, 09:37

Thanks Sanjiv. You have it correct, I'm only having the issue with a FilterBuilder.

Attached are a screen shot of the FilterBuilder using the CustomTextItem, about to save a value.

The next screen shot is the resulting JavaScriptException after the Save button has been clicked.

Attached Files

**sjivan** · 23 Sep 2010, 04:31

The problem with the original code had the call to

Code:

customCanvas.registerSaveHandler( new CustomTextItemCallback( CustomTextItem.this ) );

which again treats the CustomTextItem object passed to DataSourceField.setEditorType(..) as the actual instance of the field rendered by the FilterBuilder which is not the case. As mentioned in the other related thread

When you supply a custom FormItem via setEditorType(), you're really providing properties which are then used to create multiple FormItems (eg, in grids, forms and trees) and there's an underlying limitation here where event handlers have to be written to dynamically receive the actual FormItem rather than relying on "this" (because there's more than one "this").

To get an actual handle on the formItem, use the FormItem instance from an event obtained via getItem(). Instead of calling this.focusInItem() call event.getItem().focusInItem().

With this in mind, you can resolve the issue by making CustomCanvas a local variable within the addIconClickHandler and pass it the "real" FormItem that is obtained from IconClickEvent.getItem. The cancel callback stuff can remain as is but I've also simplified the code to get rid it it. The CustomCanvas simply adds a click handler to the cancel button that hides the Canvas.

Here's the updated code :

Code:

import com.smartgwt.client.util.EventHandler;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.FormItemIcon;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.form.fields.events.IconClickEvent;
import com.smartgwt.client.widgets.form.fields.events.IconClickHandler;

public class CustomTextItem extends TextItem {
    public CustomTextItem() {
        FormItemIcon formItemIcon = new FormItemIcon();
        setIcons(formItemIcon);


        addIconClickHandler(new IconClickHandler() {
            @Override
            public void onIconClick(IconClickEvent event) {
                FormItem formItem = event.getItem();
                System.out.println("getValue() is " + event.getItem().getValue());

                CustomCanvas customCanvas = new CustomCanvas(formItem);
                customCanvas.setTop(EventHandler.getY());
                customCanvas.setLeft(EventHandler.getX());
                customCanvas.show();
                customCanvas.bringToFront();
            }
        });
    }
}

Code:

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;


public class CustomCanvas extends Canvas {

    public CustomCanvas(final FormItem filterBuilderFormItem) {
        super();
        this.setBackgroundColor("#FFFFFF");
        this.setBorder("2px solid");
        this.setWidth(255);
        this.setHeight(100);

        VLayout vlayout = new VLayout(10);
        vlayout.setPadding(10);

        DynamicForm itemForm = new DynamicForm();
        itemForm.setWidth("100%");

        final TextItem item = new TextItem();
        item.setTitle("Item");
        item.setWidth(200);
        itemForm.setItems(item);

        vlayout.addMember(itemForm);

        HLayout hlayout = new HLayout();
        hlayout.setWidth(255);
        hlayout.setAlign(Alignment.CENTER);

        IButton saveButton = new IButton("Save");

        IButton cancelButton = new IButton("Cancel");

        DynamicForm spacer1 = new DynamicForm();
        spacer1.setWidth(10);

        hlayout.addMember(saveButton);
        hlayout.addMember(spacer1);
        hlayout.addMember(cancelButton);

        vlayout.addMember(hlayout);
        addChild(vlayout);

        item.setValue((String) filterBuilderFormItem.getValue());

        saveButton.addClickHandler(new ClickHandler() {
            public void onClick(com.smartgwt.client.widgets.events.ClickEvent event) {
                String value = ((String) item.getValue()) + " plus a modification.";
                filterBuilderFormItem.setValue(value);
                CustomCanvas.this.hide();
            }
        });

        cancelButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                CustomCanvas.this.hide();
            }
        });

    }
}

The CustomDS EntryPoint class remains unchanged.

Note that when I initially ran your test I was simply getting a text field show without the CustomTextItem properties being applied despite itemName.setEditorType(new CustomTextItem()) being called. A fix was made to resolve this but its still unclear how it did apply for you as shown in your screenshot. Anyways if you do run into this, then pick up the next nightly build.

Sanjiv

**cjustice** · 23 Sep 2010, 13:54

It didn't really sink into my head that when you call setEditorType on the FilterBuilder with an object, you are really using the properties and type of that object, not the actual instance. It seems counter-intuitive.

What you have shown to do here worked for me in my real-world code. Thanks Sanjiv for your for help and advice.

I'm not sure why my original example worked for me, but not for you. I was running the SmartGWT Pro nightly build from September 10th.

Nevertheless, my problem is fixed. Thank you!

Announcement

Custom Editor on FilterBuilder - JS crash on getValue()

Comment

Comment

Comment

Comment

Comment