HtmlLayoutContainer and HtmlData with existing DOM component

[aclsoftware]

Loving playing with Sencha GXT 3. Great job everyone involved.

I have a fairly simple requirement. A team in our company has put together a very simple html form (among many other pages). I would like to hook into that html form (contained within its current html layout ) and insert fields / widgets into specified places and handle them as I would any normal GXT app.

Therefore I have used the following techniques after inserting the GWT code on the relevant page.

Element myElement= DOM.getElementById("myid"); //element containing the layout i need
HtmlLayoutContainer con = new HtmlLayoutContainer(myElement.getInnerHTML());
myElement.setInnerHTML("");

//add fields
TextField field1 = new TextField();
field1.setAllowBlank(false);
con.add(field1, new HtmlData(".locationid1"));

This works very well in terms on displaying elements in the relevant position.

My question : Is there a better way of doing this instead of "grabbing" the innerhtml and rewriting it? I.e. can i bind a HtmlLayoutContainer to an existing DOM element?

This technique would be hugely beneficial to us as it would allow one team to fully design and build the html and its layout and allow us to implement the business logic independently.

Any thoughts would be greatly appreciated.

ACL

[Colin Alworth]

GWT itself has a few hooks that make something like this possible, but we've tried to stay away from it in GXT for a variety of reasons - might have been an oversight in this case though. That said, where are you getting this html form from? Could it be kept as a String instead, or perhaps put into a html file in your project, and referenced via a XTemplate? That would compile the string into the application, but still keep it as a standalone html file for anyone who wants to edit it.

Another idea would be to create the HtmlLayoutContainer with no content, then attach the form to it, something like this:

Element myElement= DOM.getElementById("myid"); //element containing the layout i need
HtmlLayoutContainer con = new HtmlLayoutContainer("");
con.getElement().appendChild(myElement);

My first preference would be a distinct html file in the project for each form, since this way you aren't drawing all of these forms on the page as the app starts up, then re-drawing them in a new container.

[aclsoftware]

Hi Colin

Thanks for taking the time to reply.

I did look at including the html source within my project (as an XTemplate or String etc) but I am only inserting my app into a small part of an existing site so wanted to keep all that together and let the current web designers put the layout together. It would be great to be able to reference a remote template, but i am not sure that is possible.

The code snipped you offered is probably a better way to construct what i need.

Thanks again for your help.

ACL

[Colin Alworth]

A remote template could be achieved by using RequestBuilder to load via GET from a given URL, but you'd need to do this asynchronously, which may or may not be acceptable.

Remember too that with a XTemplate, you can point to an external HTML file - see http://www.sencha.com/examples/#ExamplePlace:templates for an example of this. In this case, the string is available right away because it is compiled in - the downside is that the string can't be changed without re-compiling the app.