Adding crosshair in ExtGWT chart

If you want to add crosshair on hover over chart in ExtGWT just like the chart in http://www.highcharts.com/demo/spline-symbols use the following code:

// wire up all series to interact with their highlight behavior
LinkedSeriesHighlightHandler link = new LinkedSeriesHighlightHandler(chart);
series.addSeriesItemOverHandler(link);
series.addSeriesItemOutHandler(link);
series2.addSeriesItemOverHandler(link);
series2.addSeriesItemOutHandler(link);
series3.addSeriesItemOverHandler(link);
series3.addSeriesItemOutHandler(link);

BarSeries bar = new BarSeries();
bar.addSeriesItemOverHandler(link);
bar.addSeriesItemOutHandler(link);
//explicitly not binding to a numeric axis, so that we dont care what values we return as our max
bar.addYField(new ValueProvider() {
    @Override
    public String getPath() {
        return "max";
    }
    @Override
    public Number getValue(Data object) {
        return 100;
    }
    @Override
    public void setValue(Data object, Number value) {
    //no-op
    }
});
//don't actually let them be visible
bar.addColor(Color.NONE);
bar.setColumn(true);
bar.setHighlighting(true);
//not needed if you dont use legend
bar.setShownInLegend(false);
//no gaps between regions - you may want to play with this
bar.setGutter(0);

//add a custom series highlighter to show the crosshair through the bar - this really
//only makes sense with multiple other series
bar.setHighlighter(new SeriesHighlighter() {
     private Map oldCrosshairs = new HashMap();
     @Override
     public void unHighlight(Sprite sprite) {
        PathSprite crosshair = oldCrosshairs.remove(sprite);
        if (crosshair != null) {
          crosshair.remove();
        }
       System.out.println("removed, new size is " + oldCrosshairs.size());
     }

     @Override
     public void highlight(Sprite sprite) {
     //we're especially insistent on only one being visible at a time, aggressively 
     //punch out existing ones
     unHighlight(sprite);

     PathSprite crosshair = new PathSprite();
     RectangleSprite bar = (RectangleSprite) sprite;
     //move to the top of the bar, in the middle
     crosshair.addCommand(new MoveTo(bar.getX() + bar.getWidth()/2, bar.getY()));
     //draw down to the bottom
     crosshair.addCommand(new LineTo(bar.getX() + bar.getWidth()/2, bar.getY() + 
                          bar.getHeight()));

     crosshair.setStroke(RGB.BLACK);
     chart.addSprite(crosshair);
     crosshair.redraw();
     oldCrosshairs.put(sprite, crosshair);
     System.out.println("added, new size is   " + oldCrosshairs.size());
  }
});
//The above impl isn't accounting for animations, so we should either 
//disable those or add some animation code in the highlighter. Also 
//remove the animation button below
chart.setAnimated(false);

chart.addSeries(bar);

//disable all shadows to stop the bar from having shadows - a better fix
//would be to add a custom shadow renderer to the bar series that does 
//nothing. Also remove the shadow button below
chart.setShadowChart(false);

Install Sencha Touch 2 on Ubuntu 12.04

After trying a lot of tutorials, I finally got hold of one which worked like charm. Here is the link.