Hybrid View

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext GWT Premium Member lefke123's Avatar
    Join Date
    Dec 2011
    Location
    Belgium
    Posts
    80
    Vote Rating
    15
    lefke123 will become famous soon enough

      0  

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

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


    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
    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;
     
        @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

  2. #2
    Sencha User
    Join Date
    May 2012
    Location
    Belgium
    Posts
    6
    Vote Rating
    0
    boermansjo is on a distinguished road

      0  

    Default


    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 :
    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.

  3. #3
    Ext GWT Premium Member lefke123's Avatar
    Join Date
    Dec 2011
    Location
    Belgium
    Posts
    80
    Vote Rating
    15
    lefke123 will become famous soon enough

      0  

    Default


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

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

  4. #4
    Sencha User
    Join Date
    May 2012
    Location
    Belgium
    Posts
    6
    Vote Rating
    0
    boermansjo is on a distinguished road

      0  

    Default


    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"

  5. #5
    Ext GWT Premium Member lefke123's Avatar
    Join Date
    Dec 2011
    Location
    Belgium
    Posts
    80
    Vote Rating
    15
    lefke123 will become famous soon enough

      0  

    Default


    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.

  6. #6
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    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.

Thread Participants: 2