1. #1
    Sencha User
    Join Date
    Aug 2008
    Posts
    129
    Vote Rating
    0
    Padster is on a distinguished road

      0  

    Default Answered: Complex form layouts without Layout containers

    Answered: Complex form layouts without Layout containers


    Hey folks,
    I heard Darrell Meyer talk about how its not good practice to use containers for the layout of complex forms as it is very slow, instead use HTML fragments!

    I often work with complex forms that have column layouts and field sets to organize the fields and im unable to create this without using tons of containers.

    Attached is a screen shot of one such form, each column is a seperate container and those container are then organised in a field set with a column layout.
    ScreenShot109.jpg
    Anyone know what darrell means with HTML fragments or how would you achieve this layout?

    Thanks,

    Patrick

  2. Sorry.

    The FormLabels are comming from the FormLayout. Because you are no longer using a FormLayout, you will need to put them into your markup:
    Code:
    StringBuffer sb = new StringBuffer(); sb.append("<div style="padding: 10px">LABEL 1</div>");sb.append("<div id='ro'></div>"); sb.append("<div style="padding: 10px">LABEL 2</div>");sb.append("<div id='dis'></div>");

  3. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Answers
    60
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      -1  

    Default


    One approach could be to use HtmlContainer. There you could have the required markup, for example a table. Each field would be rendered into a specific cell that you can target with a css selector.

    HtmlLayoutContainer does not resize its children automatically. Do you require this feature too?

  4. #3
    Sencha User
    Join Date
    Aug 2008
    Posts
    129
    Vote Rating
    0
    Padster is on a distinguished road

      0  

    Default


    Hi Sven,

    I rarely use layouts like anchor layout or percentage sizing for form fields so resize may not be a big issue.

    Do you have any code snippet or examples where this is acheived?

    Im not som familar with CSS/HTML as i should be (lazy java developer) I've been trying like this but no luck yet.

    Code:
    FormPanel form = new FormPanel(); TextField ro = new TextField(); ro.setReadOnly(true); ro.setFieldLabel("ReadOnly field"); ro.setValue("READ ONLY"); TextField dis = new TextField(); dis.disable(); dis.setFieldLabel("Disabled field"); dis.setValue("DISABLED"); StringBuffer sb = new StringBuffer(); sb.append("<div id='ro'></div>"); sb.append("<div id='dis'></div>"); HtmlContainer html = new HtmlContainer(sb.toString()); html.add(ro, "#ro"); html.add(dis, "#dis"); form.add(html);


    Thanks,
    Last edited by Padster; 4 Jun 2012 at 11:33 PM. Reason: code formatting

  5. #4
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Answers
    60
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      -1  

    Default


    I run your code and it works as expected. What exactly does not work for you?

  6. #5
    Sencha User
    Join Date
    Aug 2008
    Posts
    129
    Vote Rating
    0
    Padster is on a distinguished road

      0  

    Default


    Sven,

    I expect the form labels, padding etc to be shown but i cant get this working

    ScreenShot110.jpg

  7. #6
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Answers
    60
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Sorry.

    The FormLabels are comming from the FormLayout. Because you are no longer using a FormLayout, you will need to put them into your markup:
    Code:
    StringBuffer sb = new StringBuffer(); sb.append("<div style="padding: 10px">LABEL 1</div>");sb.append("<div id='ro'></div>"); sb.append("<div style="padding: 10px">LABEL 2</div>");sb.append("<div id='dis'></div>");

  8. #7
    Sencha User
    Join Date
    Aug 2008
    Posts
    129
    Vote Rating
    0
    Padster is on a distinguished road

      0  

    Default


    Sven,

    Sorry for the late reply and thanks for you help ill give that a go

    Thanks,

    Patrick

  9. #8
    Sencha User
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    0
    maxblais is on a distinguished road

      0  

    Default


    I'm interested in this too, because we create complex form that use sometime up to 10 ContentPanel some embedded in others. This is a convenient way to code and easy to maintain.

    I'm not sure using String buffer could be a solution for us. the code will become too hard to maintain
    So what do you guys suggest, code maintenance vs speed ?
    Why can't gxt convert our Container into optimal html code instead ?

Thread Participants: 2