vaadin+Extjs---unable to call vaadin callback function from js

Hi all,
I’m trying to integrate vaadin with Extjs scheduler…Here I’m successfully loading EXTjs UI onto the screen but the problem is handling the event…i’m unable to call vaadin callback function…
Any suggestions,help will be needfull…code details are

[code]
@SuppressWarnings(“serial”)
@Theme(“vaadinscheduler”)
public class VaadinschedulerUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = VaadinschedulerUI.class)
public static class Servlet extends VaadinServlet{
}  
@Override
protected void init(VaadinRequest request) {       
    final VerticalLayout v=new VerticalLayout();

    SchedulerComponent sc=new SchedulerComponent();
    v.addComponent(sc);
    setContent(v);

}

}
[/code](Server component)
SchedulerComponent.java

[code]
@JavaScript({“ext-all.js”,“sch-all-debug.js”,“Schdeuler.js”,“sch-all.js”})
@StyleSheet({“examples.css”,“ext-theme-classic-all.css”,“sch-all.css”,“style.css”})
//@JavaScript({ “Schdeuler.js” })
public class SchedulerComponent extends AbstractJavaScriptComponent {

@Override
public SchedulerState getState(){
    return (SchedulerState) super.getState();
}

public SchedulerComponent(final VerticalLayout v){
    
    addFunction("sch", new JavaScriptFunction()  {
        @Override
        public void call(JsonArray arguments) throws JSONException {
            // TODO Auto-generated method stub
            
            Notification.show("hiiiii");
            
        }
        
        });
  
}

}
/code
Schdeuler.js

com_example_vaadinscheduler_SchedulerComponent=function(){
    
    var e=this.getElement();
   
var self=this;
    var bb=self.sch;// [color=#FF0000]
i'm unable to call vaadin callback functiona
[/color]
    console.log(bb);
    
    var resourceStore = new Sch.data.ResourceStore({
        sorters : 'Name',

        data : [
            {Id : 'r1', Name : 'Mike'},
            {Id : 'r2', Name : 'Linda'},
        
        ]
    });

    // Store holding all the events
    var eventStore = new Sch.data.EventStore({
        data : [
            {
                ResourceId : 'r9',
                StartDate  : "2011-02-16 12:00",
                EndDate    : "2011-02-16 16:00"
            },
            {
                ResourceId : 'r2',
                StartDate  : "2011-02-17 08:00",
                EndDate    : "2011-02-17 14:00"
            }
        ]
    });
    var sch=Ext.create('Sch.panel.SchedulerGrid',{
        width:1000,
        height:400,
    title      : 'Employee Time Scheduler',
    border     : true,
    viewPreset : 'hourAndDay',
    rowHeight  : 30,
    enableDragCreation : false,
    constrainDragToResource :true,
    allowOverlap : false,
       
    renderTo:e,

    startDate     : new Date(2011, 1, 14),
        endDate       : new Date(2011, 1, 20),
        //selModel      : sm,
       
        resourceStore : resourceStore,
        eventStore    : eventStore,
        eventRenderer : function (event, r, tplData, row, col, ds) {
            console.log('inside eventRenderer');
            
            return Ext.Date.format(event.getStartDate(), 'G:i') + ' - ' + Ext.Date.format(event.getEndDate(), 'G:i')+"<br>"+event.get('Shift')+" "+event.getName( );
        },
        listeners:{
         eventresizeend : function( scheduler, record, eOpts ){
             console.log("inside eventresize");
             var a=self.sch; //[color=#FF0000]
i'm unable to call vaadin callback function
[/color]
             console.log(a);
             console.log("eve resize");
         
         }
            
         }
         
    });
    
    

As you’re already created a Javascript Component why not catch the event on the client side and then use a ServerRPC to communicate it to the server side:

Vaadin Wiki: Using RPC from Javascript

Thanks marius…works perfect…:slight_smile:

can i know what was going wrong with the above approach…

Not entirely sure because i don’t really know anything about extJS and I only had a glimpse of your code but I’m guessing that addFunction adds the callback on the window or document level while your sch function get called on the component level.
I’m just guessing here though.
I would also recommend the RPC method here as addFunction adds a new Function to the page every time its called. So not only might there be some problem where in case you have multiple instances of your component, callbacks of both components might go to just one instances but also, if you create a lot of instances of this class there will be a bunch of code lines created on your client that aren’t really necessary anymore.