1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    Abarton is on a distinguished road

      0  

    Default Unanswered: Grid- Conditional styles on click

    Unanswered: Grid- Conditional styles on click


    Hello all,

    I have a grid that when a row is selected needs to change to one of three styles depending on a conditional in the java code.

    I have tried setting styles and attributes in the click handler (does nothing), and I have tried changing the GridViewConfig's getRowStyle (goes to default selected color, then goes to conditional color a second later).

    How should I be going about doing this?

  2. #2
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Vote Rating
    21
    Answers
    20
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    trying to understand your last statement here. when you say you've changed GridViewConfig's getRowStyle do you mean you have it working as you want, but it's taking a second to take effect?

    just glancing at the api, it looks like that is the right class to do what you want. i'm familiar with how I would want to do this at a cell level but not row.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    Abarton is on a distinguished road

      0  

    Default


    Correct,
    The user clicks on the row, it changes to the default selected color, then a second later it refreshes and changes to the conditional color.

    How would I do this at the cell level?

  4. #4
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Vote Rating
    21
    Answers
    20
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    When you say a second later, are you moving the mouse? I.e., if you click on the row and leave the mouse cursor there (try taking your hand off the mouse) does it still revert back?

    If you're moving the mouse, what's probably happening is that the onMouseOut or focus/blur events are being fired which is causing the color change.

    Depending on the type of cell you're rendering, you want to override the onBrowserEvent(...) method and listen for the appropriate event and apply the style you want. Here's an example we've done for mouse events:
    Code:
       @Override
       public void onBrowserEvent(Context context, Element parent, AssetBean value, NativeEvent event, ValueUpdater<AssetBean> valueUpdater) {
    
          String eventType = event.getType();
          XElement p = parent.cast();
          if ("mouseover".equals(eventType)) {
             onMouseOver(p);
          }
          else if ("mouseout".equals(eventType)) {
             onMouseOut(p);
          }
       }
    
       protected static void onMouseOut(XElement p) {
          p.addClassName("cursor-default");
          p.removeClassName("cursor-pointer");
       }
    
       protected static void onMouseOver(XElement p) {
          p.removeClassName("cursor-default");
          p.addClassName("cursor-pointer");
       }
    If you do wind up constructing your own cell, make sure you pass to super(...) the events to which you want to subscribe or you won't get them:
    Code:
    import com.google.gwt.cell.client.AbstractCell;
    
    public class MyCell extends AbstractCell<MyBean>
    {
       public MyCell()
       {
          super("click", "keydown", "mouseover", "mouseout");
       }
    
    
    *** snip ***
    I would caution against using this approach for the entire row however. If you're looking for a more thorough answer that applies to the row, the GXT devs hang out in #extgwt on Freenode IRC.

Thread Participants: 1

Tags for this Thread