Results 1 to 4 of 4

Thread: Click on a progress bar widget in a grid

  1. #1
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
      0  

    Default Click on a progress bar widget in a grid

    Hi all,

    I'm trying to add a listener on a widget that is on a grid row.
    This is my code (based on the GridExample) :

    Code:
    public class GridExample extends LayoutContainer
    {
    
      @Override
      protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
        setLayout(new FlowLayout(10));
    
        final NumberFormat currency = NumberFormat.getCurrencyFormat();
        final NumberFormat number = NumberFormat.getFormat("0.00");
        final NumberCellRenderer<Grid<Stock>> numberRenderer = new NumberCellRenderer<Grid<Stock>>(
            currency);
    
        GridCellRenderer<Stock> change = new GridCellRenderer<Stock>() {
          public String render(Stock model, String property, ColumnData config, int rowIndex,
              int colIndex, ListStore<Stock> store, Grid<Stock> grid) {
            double val = (Double) model.get(property);
            String style = val < 0 ? "red" : "green";
            return "<span style='color:" + style + "'>" + number.format(val) + "</span>";
          }
        };
        
        GridCellRenderer<Stock> barRenderer = new GridCellRenderer<Stock>()
        {
            public Object render(final Stock model, String property, ColumnData config, final int rowIndex,
                final int colIndex, ListStore<Stock> store, Grid<Stock> grid)
            {
                ProgressBar progressBar = new ProgressBar();
                double val = (Double)model.get(property);
                if (val < 0)
                    val = -val;
                progressBar.updateProgress(val, "");
                progressBar.setToolTip(String.valueOf((int)(val * 100)) + "%");
                progressBar.setWidth(grid.getColumnModel().getColumnWidth(colIndex) - 10);
                progressBar.addListener(Events.OnClick, new Listener<BaseEvent>() 
                {
                    @Override
                    public void handleEvent(BaseEvent be)
                    {
                        MessageBox.alert("", "click ok", null);
                    }
                });
                return progressBar;
            }
         };
    
    
        GridCellRenderer<Stock> gridNumber = new GridCellRenderer<Stock>() {
          public String render(Stock model, String property, ColumnData config, int rowIndex,
              int colIndex, ListStore<Stock> store, Grid<Stock> grid) {
            return numberRenderer.render(null, property, model.get(property));
          }
        };
    
        List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
    
        ColumnConfig column = new ColumnConfig();
        column.setId("name");
        column.setHeader("Company");
        column.setWidth(200);
        configs.add(column);
    
        column = new ColumnConfig();
        column.setId("symbol");
        column.setHeader("Symbol");
        column.setWidth(100);
        configs.add(column);
    
        column = new ColumnConfig();
        column.setId("last");
        column.setHeader("Last");
        column.setAlignment(HorizontalAlignment.RIGHT);
        column.setWidth(75);
        column.setRenderer(gridNumber);
        configs.add(column);
    
        column = new ColumnConfig("change", "Change", 100);
        column.setAlignment(HorizontalAlignment.RIGHT);
        column.setRenderer(barRenderer);
        configs.add(column);
    
        column = new ColumnConfig("date", "Last Updated", 100);
        column.setAlignment(HorizontalAlignment.RIGHT);
        column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());
        configs.add(column);
    
        ListStore<Stock> store = new ListStore<Stock>();
        store.add(TestData.getStocks());
    
        ColumnModel cm = new ColumnModel(configs);
    
        ContentPanel cp = new ContentPanel();
        cp.setBodyBorder(false);
        cp.setHeading("Basic Grid");
        cp.setButtonAlign(HorizontalAlignment.CENTER);
        cp.setLayout(new FitLayout());
        cp.setSize(600, 300);
    
        Grid<Stock> grid = new Grid<Stock>(store, cm);
        grid.setStyleAttribute("borderTop", "none");
        grid.setAutoExpandColumn("name");
        grid.setBorders(true);
        grid.setStripeRows(true);
        cp.add(grid);
    
        add(cp);
      }
    }
    So, the interessant part is here :

    Code:
    GridCellRenderer<Stock> barRenderer = new GridCellRenderer<Stock>()
        {
            public Object render(final Stock model, String property, ColumnData config, final int rowIndex,
                final int colIndex, ListStore<Stock> store, Grid<Stock> grid)
            {
                ProgressBar progressBar = new ProgressBar();
                [...]
                progressBar.addListener(Events.OnClick, new Listener<BaseEvent>() 
                {
                    @Override
                    public void handleEvent(BaseEvent be)
                    {
                        MessageBox.alert("", "click ok", null);
                    }
                });
                return progressBar;
            }
         };
    This is not working, neither with the OnMouseDown event and the RowClick event nor the CellClick event.
    But this is working with the OnMouseMove event for example.

    How can I react to the click event on the progress bar widget that is on the grid ?

    Thanks in advance for any help

  2. #2
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
      0  

    Default

    this should be very easy, but i'm unable to handle the click event ...

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976
    Vote Rating
    131
      0  

    Default

    Code:
    progressBar.sinkEvents(Event.ONCLICK);

  4. #4
    Ext User
    Join Date
    Nov 2009
    Posts
    81
    Vote Rating
    0
      0  

    Default

    thanks sven, it's working

Posting Permissions

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