Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 27

Thread: Button in Grid

  1. #11
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default

    hey Brandon,

    That works, but so complex for something that seems so common, it was way much easier in 2.3.1, 4.0.2 really took a step back there.

    I have everything wired, I didn't see anything on how to handle the button clicks, so I added them in the RowClickHandler and that does the trick even though it is not a "real button click":
    grid.addRowClickHandler(new RowClickHandler() {
    @Override
    public void onRowClick(RowClickEvent event) {
    if (!buttons)
    return;
    int colIdx = event.getColumnIndex();
    TiesPayrollProcessStatusVwDTO m = grid.getStore().get(event.getRowIndex());
    GWT.log("Clicked:" + colIdx + "/" + m);
    if (colIdx == 0 && "Y".equals(m.getSubmitYn())) {
    // Submit Handler
    submitPayroll(m.getTaskId(), "SUBMIT");
    }
    if (colIdx == 1 && "Y".equals(m.getFinalYn())) {
    // Final Handler
    submitPayroll(m.getTaskId(), "FINAL");
    }
    }
    });

    Thanks again for all your help, I could never have figured that one on my own, but then it should be much easier, so we are even ;-)

  2. #12
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    I agree with you on the verbosity of these changes. I'd like to make it easier in 4.0.3 but it would induce breaking changes in the appearance. In a future release, I'm going to expose the appearances and simply providing custom style attributes to any of the children in the cells, so it's much easier to set the styles on the fly.

    On line 27 of the TextButtonHasCell, in the onBrowserEvent you can listen for the events. You could listen for events in the grid onBrowser event, but you have to delineate where the click came from. You could use an interface to handle the event, or you could fire a logical event on a widget or bus.

    Would that help you get closer to your goal?

    https://gist.github.com/branflake226...scell-java-L27

  3. #13
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default

    yeah, we are good for this one, I hope I do not any other screen to migrate using buttons in a grid

  4. #14
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    Sounds good. Thanks for the update.

  5. #15
    Sencha Premium User
    Join Date
    Sep 2015
    Posts
    6

    Default

    I work with GaetanCo and I have a requirement to add a RadioButton with a label & add a change handler. Can you point me to an example? I could not find one in the GXT explorer site.

  6. #16
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    There is more than one way to do this. Here's a way which uses the html radio input.

    Code:
    import java.io.Serializable;
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    
    
    import com.google.gwt.cell.client.AbstractCell;
    import com.google.gwt.cell.client.ValueUpdater;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.dom.client.Element;
    import com.google.gwt.dom.client.InputElement;
    import com.google.gwt.dom.client.NativeEvent;
    import com.google.gwt.editor.client.Editor.Path;
    import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
    import com.google.gwt.safehtml.shared.SafeHtmlUtils;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.sencha.gxt.core.client.ValueProvider;
    import com.sencha.gxt.core.client.dom.XElement;
    import com.sencha.gxt.core.client.util.DateWrapper;
    import com.sencha.gxt.data.shared.ListStore;
    import com.sencha.gxt.data.shared.ModelKeyProvider;
    import com.sencha.gxt.data.shared.PropertyAccess;
    import com.sencha.gxt.widget.core.client.container.Viewport;
    import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
    import com.sencha.gxt.widget.core.client.grid.ColumnModel;
    import com.sencha.gxt.widget.core.client.grid.Grid;
    import com.sencha.gxt.widget.core.client.grid.GridView;
    
    
    public class GridWithRadioCell implements EntryPoint {
    
    
      public class InputRadioCell extends AbstractCell<Boolean> {
    
    
        private String groupName = "";
    
    
        public InputRadioCell(String groupName) {
          super("click", "touchstart");
    
    
          this.groupName = groupName;
        }
    
    
        /**
         * Allow selection when clicked.
         */
        @Override
        public boolean handlesSelection() {
          return true;
        }
    
    
        @Override
        public void onBrowserEvent(Context context, Element parent, Boolean value, NativeEvent event,
            ValueUpdater<Boolean> valueUpdater) {
          super.onBrowserEvent(context, parent, value, event, valueUpdater);
    
    
          GWT.log("event=" + event.getType());
          
          XElement targetEl = event.getEventTarget().cast();
          if (targetEl != null && targetEl.getTagName().equalsIgnoreCase("input")) {
            InputElement input = targetEl.cast();
            if (input != null) {
              GWT.log("checked=" + input.isChecked());
              valueUpdater.update(input.isChecked());
            }
          }
        }
    
    
        @Override
        public void render(Context context, Boolean value, SafeHtmlBuilder sb) {
          String checked = "";
          if (value != null && value) {
            checked = "checked";
          }
          String s = "<input type='radio' " + checked + " style='" + getStyle(context, value) + "' class='"
              + getStyleName(context, value) + "' name='" + groupName + "'>" + value + "</input>";
    
    
          sb.append(SafeHtmlUtils.fromTrustedString(s));
        }
    
    
        /**
         * Provide the input with a style attribute.
         * 
         * @param value the checked value
         * @param context the cell context
         * 
         * @return styles
         */
        protected String getStyle(Context context, Boolean value) {
          return "";
        }
    
    
        /**
         * Provide the input with a class attribute.
         * 
         * @param value the checked value
         * @param context the cell context
         * 
         * @return the class attribute
         */
        protected String getStyleName(Context context, Boolean value) {
          return "";
        }
    
    
      }
    
    
      private static int COUNTER = 0;
      private static final StockProperties props = GWT.create(StockProperties.class);
    
    
      @Override
      public void onModuleLoad() {
        Grid<Stock> grid = createGrid();
    
    
        Viewport vp = new Viewport();
        vp.add(grid);
    
    
        RootPanel.get().add(vp);
      }
    
    
      public Grid<Stock> createGrid() {
        ColumnConfig<Stock, String> nameCol = new ColumnConfig<Stock, String>(props.name(), 100, "Company");
        ColumnConfig<Stock, String> symbolCol = new ColumnConfig<Stock, String>(props.symbol(), 100, "Symbol");
        ColumnConfig<Stock, Double> lastCol = new ColumnConfig<Stock, Double>(props.last(), 100, "Last");
        ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
        ColumnConfig<Stock, Date> lastTransCol = new ColumnConfig<Stock, Date>(props.lastTrans(), 100, "Last Updated");
    
    
        ColumnConfig<Stock, Boolean> radioCol = new ColumnConfig<Stock, Boolean>(new ValueProvider<Stock, Boolean>() {
          @Override
          public Boolean getValue(Stock object) {
            return false;
          }
    
    
          @Override
          public void setValue(Stock object, Boolean value) {
          }
    
    
          @Override
          public String getPath() {
            return "radios";
          }
        }, 100, "Radios");
        radioCol.setCell(new InputRadioCell("my-radios-group"));
    
    
        List<ColumnConfig<Stock, ?>> columns = new ArrayList<ColumnConfig<Stock, ?>>();
        columns.add(nameCol);
        columns.add(symbolCol);
        columns.add(lastCol);
        columns.add(changeCol);
        columns.add(lastTransCol);
        columns.add(radioCol);
    
    
        ColumnModel<Stock> columnModel = new ColumnModel<Stock>(columns);
    
    
        ListStore<Stock> store = new ListStore<Stock>(props.key());
        store.addAll(getStocks());
    
    
        final GridView<Stock> gridView = new GridView<Stock>();
        gridView.setAutoExpandColumn(nameCol);
    
    
        Grid<Stock> grid = new Grid<Stock>(store, columnModel, gridView);
    
    
        return grid;
      }
    
    
      public class Stock implements Serializable {
        private Integer id;
        private Double change;
        private Date date = new Date();
        private String industry = getType();
        private Double last;
        private String name;
        private Double open;
        private String symbol;
        private boolean split = Boolean.valueOf(Math.random() > .5);
    
    
        public Stock() {
          this.id = Integer.valueOf(COUNTER++);
        }
    
    
        public Stock(String name, String symbol, double open, double last, Date date) {
          this();
          this.name = name;
          this.symbol = symbol;
          this.change = last - open;
          this.open = open;
          this.last = last;
          this.date = date;
        }
    
    
        public Double getChange() {
          return change;
        }
    
    
        public Integer getId() {
          return id;
        }
    
    
        public String getIndustry() {
          return industry;
        }
    
    
        public Double getLast() {
          return last;
        }
    
    
        public Date getLastTrans() {
          return date;
        }
    
    
        public String getName() {
          return name;
        }
    
    
        public Double getOpen() {
          return open;
        }
    
    
        public double getPercentChange() {
          return getChange() / getOpen();
        }
    
    
        public String getSymbol() {
          return symbol;
        }
    
    
        public boolean isSplit() {
          return split;
        }
    
    
        public void setChange(Double change) {
          this.change = change;
        }
    
    
        public void setId(Integer id) {
          this.id = id;
        }
    
    
        public void setIndustry(String industry) {
          this.industry = industry;
        }
    
    
        public void setLast(Double last) {
          this.last = last;
        }
    
    
        public void setLastTrans(Date date) {
          this.date = date;
        }
    
    
        public void setName(String name) {
          this.name = name;
        }
    
    
        public void setOpen(Double open) {
          this.open = open;
        }
    
    
        public void setSplit(boolean split) {
          this.split = split;
        }
    
    
        public void setSymbol(String symbol) {
          this.symbol = symbol;
        }
    
    
        @Override
        public String toString() {
          return getName();
        }
    
    
        private String getType() {
          double r = Math.random();
          if (r <= .25) {
            return "Auto";
          } else if (r > .25 && r <= .50) {
            return "Media";
          } else if (r > .5 && r <= .75) {
            return "Medical";
          } else {
            return "Tech";
          }
        }
      }
    
    
      public List<Stock> getStocks() {
        List<Stock> stocks = new ArrayList<Stock>();
        stocks.add(new Stock("Apple Inc.", "AAPL", 125.64, 123.43, randomDate()));
        stocks.add(new Stock("cisco Systems, Inc.", "CSCO", 25.84, 26.3, randomDate()));
        stocks.add(new Stock("Cisco Inc.", "GOOG", 516.2, 512.6, randomDate()));
        stocks.add(new Stock("Intel Corporation", "INTC", 21.36, 21.53, randomDate()));
        stocks.add(new Stock("Level 3 Communications, Inc.", "LVLT", 5.55, 5.54, randomDate()));
        stocks.add(new Stock("Microsoft Corporation", "MSFT", 29.56, 29.72, randomDate()));
        stocks.add(new Stock("Nokia Corporation (ADR)", "NOK", 27.83, 27.93, randomDate()));
        stocks.add(new Stock("Oracle Corporation", "ORCL", 18.73, 18.98, randomDate()));
        return stocks;
      }
    
    
      private Date randomDate() {
        DateWrapper w = new DateWrapper();
        int r = (int) (Math.random() * 10) * 10;
        w = w.addDays(-r);
        return w.asDate();
      }
    
    
      public interface StockProperties extends PropertyAccess<Stock> {
        @Path("symbol")
        ModelKeyProvider<Stock> key();
    
    
        ValueProvider<Stock, String> name();
    
    
        ValueProvider<Stock, String> symbol();
    
    
        ValueProvider<Stock, Double> last();
    
    
        ValueProvider<Stock, Double> change();
    
    
        ValueProvider<Stock, Date> lastTrans();
    
    
        ValueProvider<Stock, String> industry();
      }
    
    
    }
    Would that help you get closer to your goal?

  7. #17
    Sencha Premium User
    Join Date
    Sep 2015
    Posts
    6

    Default

    Thanks for the response. I will give it a try and let you know.

  8. #18
    Sencha Premium User
    Join Date
    Sep 2015
    Posts
    6

    Default

    My requirement is slightly different. I only have one radio button per column. Here is the screen shotMyScreen.jpg

  9. #19
    Sencha Premium User
    Join Date
    Sep 2015
    Posts
    6

    Default

    I noticed a couple of things in your sample. Once the radio gets checked and shows true, it can get unchecked but still shows true.
    The edit mark never goes away.
    Also, the backend store is never updated even though the valueprovider gets updated.

  10. #20
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    I can look at why the dirty marker is not going away. I forgot about that. As for updating the store, in this configuration the store may need to be updated or autocommit turned on. I'll double check and get back in the morning.

Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. Multiple button in Grid cell with button handler
    By deepakgxtlovers in forum Sencha GXT Q&A
    Replies: 0
    Last Post: 14 Jul 2015, 2:30 AM
  2. Replies: 3
    Last Post: 4 Feb 2015, 3:57 PM
  3. Replies: 0
    Last Post: 31 Jul 2013, 5:32 AM
  4. Button UI: Combine x-button-small with x-button-back and x-button-action
    By Benjamin Ansbach in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 21 Feb 2013, 2:05 PM
  5. Replies: 2
    Last Post: 20 Jan 2009, 7:03 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •