JavascriptExtension: this.getElement() returns always null?

Hi,

I am trying to integrate a Javascript-library using a Javascript-Extension, but I cannot get it to work. In my connector I am basically doing the same as the Book of Vaadin says, but this.getElement() always returns null.

Connector:

window.de_tobiasdemuth_vaadin_MyExtension =
function() {
    
    alert(this.getElement());
    
    // Create the component
    var ext = js.init(this.getElement());
    
    // Handle changes from the server-side
    this.onStateChange = function() {
        // left out
    };
    
};

Usage in UI:

@Override
	protected void init(VaadinRequest request) {
		final VerticalLayout layout = new VerticalLayout();
		layout.setMargin(true);
		setContent(layout);

		final TextArea ta = new TextArea();
		new MyExtension().extend(ta);
		layout.addComponent(ta);
	}

Does anybody have an idea what I am doing wrong here?

kind regards
Tobias

Try using

var connectorId = this.getParentId();
var element = this.getElement(connectorId);

 If I remember correctly,

this.getElement() 

works for Javascript components but for extensions, you need to pass the parent connector id (the extension itself has no own element)

Hi Artur,

thanks, that solved the issue. The Book of Vaadin needs an update there, I'll go and notify Marko ...

kind regards
Tobias