Form + Custom Layout, maybe template?

[enterco]

Hi all,

I've been searching for hours an example of a modifiable form. I want to use few different "skins" for same type of data. Since I need to update some fields after form update, it would be nice that the form components to be easy identifiable.

Here's some (pseudo) code of what i would like to do:

var html_template1=join('<table><tr><td>Template1</td></tr>',
'<tr><td>Some look &amp; feel <h2>specific</h2> ',
'text for first template<div id="updatefield1" style="display:inline;"></div></td></tr>',
'</table>',
<p>Here we have another layout <div id="inputfield1"',
' style="display:inline;"></div>
);

And another look of the same data:

var html_template1=join('<table><tr><td>Template1</td></tr>',
'<tr><td>Another look &amp; feel <h3>specific</h3> text for another template, which uses a different layout ',
'<em>second template</em><div id="inputfield1" style="display:inline;"></div></td></tr>',
'</table>',
<p>Some dummy extra text, etc, etc <div id="updatedfield1" style="display:inline;"></div>
);

These are two 'light' templates, but I want to use few more templates, with the same div id's. In both examples I used the same table as container, but in my app there are more tables, with different layouts and styles.
The selected markup will be included in a formpanel and then in a window.
My entire application is built entirely with js, I don't use anything else than the loading mask in the initial document body.
Please give me a hint! Thanks in advance!

later edit: i have the forms in a non-ext form, is there a method to reuse an existing html form in a 'templatable' manner?

ps: please excuse my english

[enterco]

I'm trying to create few complex forms, which must look like some printed documents. After reading the forums I have found that the best (at least for me) method is to create the layout in table layout or in absolute layout. I would appreciate any improvement suggestions.
I've learned the following:
- the layout ExtJS uses to display items created (textfield, combo, etc) is "column", all items are stacked from top to bottom.
- it's a good ideea to use tableLayout to display items which must sit next to other, laid out horizontally, and to display labels in table/absolute layout

Since it took me some time to figure out, I post here's a part of the the code I use to create a non-extjs-style form, which I will put it into a FormPanel, hoping that it'll shorten someone's diggin':

{
layout:"table",
layoutConfig:/*BEGIN*/{
columns:1
}/*END*/,
defaults:/*BEGIN*/{
bodyStyle:padding:3px;
}/*END*/,
items:[{
    html:" ",
    height:105,
    width:753,
    border:false,
    items:[{
        layout:"table",
        layoutConfig:/*BEGIN*/{
columns:4
}/*END*/,
        defaults:/*BEGIN*/{
bodyStyle:"padding:2px;",
border: false
}/*END*/,
        width:785,
        border:false,
        items:[{
            html:" ",
            width:60
          },{
            width:355,
            items:[{
                layout:"table",
                layoutConfig:/*BEGIN*/{
columns:2
}/*END*/,
                defaults:/*BEGIN*/{
border:false
}/*END*/,
                border:false,
                items:[{
                    html:"Cod client:",
                    border:false
                  },{
                    items:[{
                        xtype:"textfield",
                        fieldLabel:"Text",
                        name:"lc_cod_client",
                        border:false
                      }]
                  }]
              }]
          },{
            colspan:2,
            width:348,
            items:[{
                layout:"table",
                layoutConfig:/*BEGIN*/{
columns:2
}/*END*/,
                defaults:/*BEGIN*/{
border:false
}/*END*/,
                border:false,
                items:[{
                    html:"Specificație la factură:"
                  },{
                    items:[{
                        xtype:"combo",
                        fieldLabel:"Text",
                        name:"factura_specificatie",
                        hiddenName:"factura_specificatie"
                      }]
                  }]
              }]
          },{
            html:" "
          },{
            items:[{
                layout:"table",
                layoutConfig:/*BEGIN*/{
columns:2
}/*END*/,
                defaults:/*BEGIN*/{
border:false
}/*END*/,
                border:false,
                items:[{
                    html:"Nume client:"
                  },{
                    items:[{
                        xtype:"combo",
                        fieldLabel:"Text",
                        name:"lc_nume_client",
                        hiddenName:"combovalue"
                      }]
                  }]
              }]
          },{
            items:[{
                layout:"table",
                layoutConfig:/*BEGIN*/{
columns:2
}/*END*/,
                defaults:/*BEGIN*/{
border:false
}/*END*/,
                border:false,
                items:[{
                    html:"Număr:"
                  },{
                    items:[{
                        xtype:"textfield",
                        fieldLabel:"Text",
                        name:"textvalue",
                        width:101
                      }]
                  }]
              }]
          },{
            items:[{
                layout:"table",
                layoutConfig:/*BEGIN*/{
columns:2
}/*END*/,
                defaults:/*BEGIN*/{
border:false
}/*END*/,
                border:false,
                items:[{
                    html:"Data:"
                  },{
                    items:[{
                        xtype:"datefield",
                        fieldLabel:"Date",
                        name:"factura_data"
                      }]
                  }]
              }]
          },{
            html:" ",
            colspan:3
          },{
            html:"<em>Pagina: </em>2/2"
          }]
      }]
  },{
    border:false,
    items:[{
        layout:"table",
        layoutConfig:/*BEGIN*/{
columns:3
}/*END*/,
        defaults:/*BEGIN*/{
bodyStyle:"padding:2px;",
border:false
}/*END*/,
        border:false,
        height:96,
        items:[{
            html:"<em>ENERGIE MĂSURATĂ</em>",
            colspan:3
          },{
            html:"&nbsp;",
            width:100
          },{
            width:297,
            items:[{
                layout:"table",
                layoutConfig:/*BEGIN*/{
columns:2
}/*END*/,
                defaults:/*BEGIN*/{
border:false
}/*END*/,
                border:false,
                items:[{
                    html:"Cod LC:"
                  },{
                    items:[{
                        xtype:"textfield",
                        fieldLabel:"Text",
                        name:"lc_nume"
                      }]
                  }]
              }]
          },{
            items:[{
                layout:"table",
                layoutConfig:/*BEGIN*/{
columns:2
}/*END*/,
                defaults:/*BEGIN*/{
border:false
}/*END*/,
                border:false,
                items:[{
                    html:"Denumire LC:"
                  },{
                    items:[{
                        xtype:"textfield",
                        fieldLabel:"Text",
                        name:"lc_denumire",
                        width:257
                      }]
                  }]
              }]
          },{
            html:"&nbsp;"
          },{
            items:[{
                layout:"table",
                layoutConfig:/*BEGIN*/{
columns:2
}/*END*/,
                defaults:/*BEGIN*/{
border:false
}/*END*/,
                border:false,
                items:[{
                    html:"Nivel tensiune PD:"
                  },{
                    items:[{
                        xtype:"textfield",
                        fieldLabel:"Text",
                        name:"lc_nivel_tensiune_pd"
                      }]
                  }]
              }]
          },{
            items:[{
                layout:"table",
                layoutConfig:/*BEGIN*/{
columns:2
}/*END*/,
                defaults:/*BEGIN*/{
border:false
}/*END*/,
                border:false,
                items:[{
                    html:"Tip tarif:"
                  },{
                    items:[{
                        xtype:"combo",
                        fieldLabel:"Text",
                        name:"textvalue"
                      }]
                  }]
              }]
          }]
      }]
  }
} 

Best regards,
Keep doin' good things!