[GXT 3.0] TextButtonCell with menu not fully working when in a Grid

[lefke123]

Required Information

Version(s) of Ext GWT
GXT 3.0.0

Browser versions and OS
Independant of browser/OS.

Virtual Machine
No.

Description
Imagine you have TextButtonCell as depicted on the example explorer in the first column, but with a menu attached.



So if you click anywhere on the yellow area on that sample, the button's handlers are not activated. On the other hand, if your TextButtonCell has a menu, that menu is activated if you click on the yellow area (anywhere outside the actual button in fact).

IMHO, clicking inside this yellow area should not trigger the menu, as it does not fire the button handlers if there's no menu attached.

Run mode
Development mode, and production mode.

Steps to reproduce the problem

1. Open a grid that has a TextButtonCell with a menu.
2. Click outside the button, on anywhere else in the cell.

Expected result
The TextButtonCell menu should not have opened.

Actual result
Menu of the TextButtonCell opened.

Test case

public class TextButtonWithMenu implements IsWidget, EntryPoint {
 
    private Plant plant1;
 
    interface PlaceProperties extends PropertyAccess<Plant> {
 
        @Path("name")
        ModelKeyProvider<Plant> key();
 
        ValueProvider<Plant, String> name();
 
    }
 
    private static final PlaceProperties properties = GWT.create(PlaceProperties.class);
    private ListStore<Plant> store;
 
    @Override
    public Widget asWidget() {
        TextButtonCell button = new TextButtonCell();
 
        Menu menu = new Menu();
        MenuItem mItem = new MenuItem();
        mItem.setHTML("OK");
 
        menu.add(mItem);
        button.setMenu(menu);
 
        ColumnConfig<Plant, String> nameColumn = new ColumnConfig<Plant, String>(properties.name(), 100, "Name");
        ColumnConfig<Plant, String> buttonColumn = new ColumnConfig<Plant, String>(properties.name(), 100, "Action");
 
        buttonColumn.setCell(button);
 
        List<ColumnConfig<Plant, ?>> l = new ArrayList<ColumnConfig<Plant, ?>>();
        l.add(nameColumn);
        l.add(buttonColumn);
        ColumnModel<Plant> cm = new ColumnModel<Plant>(l);
 
        store = new ListStore<Plant>(properties.key());
        plant1 = new Plant();
        plant1.setId(0);
        plant1.setName("Lorem");
 
        List<Plant> plants = Arrays.asList(plant1);
 
        store.addAll(plants);
 
        Grid<Plant> grid = new Grid<Plant>(store, cm);
        grid.setBorders(true);
        grid.getView().setAutoExpandColumn(nameColumn);
        grid.getView().setTrackMouseOver(false);
 
        FramedPanel cp = new FramedPanel();
        cp.setHeadingText("Cell Grid Example");
        cp.setWidget(grid);
        cp.setPixelSize(780, 410);
        cp.addStyleName("margin-10");
 
        cp.setButtonAlign(BoxLayoutContainer.BoxLayoutPack.CENTER);
 
        return cp;
    }
 
    @Override
    public void onModuleLoad() {
        RootPanel.get().add(asWidget());
    }
}

Helpful Information
Already discussed in a similar thread: http://www.sencha.com/forum/showthre...093#post837496

Screenshot or video

Clicking yellow area should not activate the TextButtonCell menu. (Screenshot of normal TextButtonCell.)


Live test
Working example TextButtonCell without menu: http://www.sencha.com/examples/#ExamplePlace:cellgrid

[boermansjo]

There is a div bigger than the actual button.
You can solve this problem by adding a width to the column.

Here is your test code :

public class TextButtonWithMenu implements IsWidget, EntryPoint {


private Plant plant1;
     
        interface PlaceProperties extends PropertyAccess<Plant> {
     
            @Path("name")
            ModelKeyProvider<Plant> key();
     
            ValueProvider<Plant, String> name();
     
        }
     
        private static final PlaceProperties properties = GWT.create(PlaceProperties.class);
        private ListStore<Plant> store;
     
        public Widget asWidget() {
            TextButtonCell button = new TextButtonCell();
     
            Menu menu = new Menu();
            MenuItem mItem = new MenuItem();
            mItem.setHTML("OK");
     
            menu.add(mItem);
            button.setMenu(menu);
     
            ColumnConfig<Plant, String> nameColumn = new ColumnConfig<Plant, String>(properties.name(), 100, "Name");
            ColumnConfig<Plant, String> buttonColumn = new ColumnConfig<Plant, String>(properties.name(), 100, "Action");
            buttonColumn.setColumnTextStyle(SafeStylesUtils.fromTrustedString("width: 50px;"));
            buttonColumn.setCell(button);
     
            List<ColumnConfig<Plant, ?>> l = new ArrayList<ColumnConfig<Plant, ?>>();
            l.add(nameColumn);
            l.add(buttonColumn);
            ColumnModel<Plant> cm = new ColumnModel<Plant>(l);
     
            store = new ListStore<Plant>(properties.key());
            plant1 = new Plant();
            plant1.setId(0);
            plant1.setName("Lorem");
     
            List<Plant> plants = Arrays.asList(plant1);
     
            store.addAll(plants);
     
            Grid<Plant> grid = new Grid<Plant>(store, cm);
            grid.setBorders(true);
            grid.getView().setAutoExpandColumn(nameColumn);
            grid.getView().setTrackMouseOver(false);
     
            FramedPanel cp = new FramedPanel();
            cp.setHeadingText("Cell Grid Example");
            cp.setWidget(grid);
            cp.setPixelSize(780, 410);
            cp.addStyleName("margin-10");
     
            cp.setButtonAlign(BoxLayoutContainer.BoxLayoutPack.CENTER);
     
            return cp;
        }
     
        @Override
        public void onModuleLoad() {
            RootPanel.get().add(asWidget());
        }
    }

This line "buttonColumn.setColumnTextStyle(SafeStylesUtils.fromTrustedString("width: 50px;"));" will force the div around the button to be the right size.
Maybe it's not a good solution, but it works for now.

[lefke123]

Thanks, that worked around the issue for now, albeit in a different way so it uses the text width:

buttonColumn.setColumnTextStyle(SafeStylesUtils.fromTrustedString("width: "
                + TextMetrics.get().getWidth("My button text") + "px;"));

[boermansjo]

isn't there a way to get the text from the button ? I guess not all the buttons will have the same size... so it will cut your buttons if it's longer than the "My button text"

[lefke123]

It'll only work for that use case, it's a just matter of getting the cell value and using that. For what I need (button always has the same text) it suffices, but it would prove difficult if you had buttons with different widths. Because of setting the style on the entire column some cells might be too small.

Anyways, hoping this gets fixed in the next release. Then it'll work for buttons with different sizes of values as well presumably.

[darrellmeyer]

This bug was fixed in 3.0.1. See http://www.sencha.com/examples/#ExamplePlace:cellgrid. I also tested when the button has a menu.

Let me know if you are still having any issues.