1. #1
    Ext GWT Premium Member
    Join Date
    Sep 2009
    Posts
    60
    Answers
    1
    Vote Rating
    1
    aclsoftware is on a distinguished road

      0  

    Post Answered: HtmlLayoutContainer and HtmlData with existing DOM component

    Answered: HtmlLayoutContainer and HtmlData with existing DOM component


    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.

    Code:
    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

  2. 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:
    Code:
    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.

  3. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,634
    Answers
    107
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    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:
    Code:
    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.

  4. #3
    Ext GWT Premium Member
    Join Date
    Sep 2009
    Posts
    60
    Answers
    1
    Vote Rating
    1
    aclsoftware is on a distinguished road

      0  

    Default


    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

  5. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,634
    Answers
    107
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar