FormPanel Render to HTML Table

[samarth]

Hi folks,
I am using ExtJS 3.4. I have one form and i have one table. That table i have called in a xtype:'panel'. using html <Table> tag. In one table td i need a formpanel in which it contains login details. when i was rendering that form to that <td> using id <td id="idname"> i was not getting that form inside that table space. Any one know how to renderer formpanel inside table.


Thanks in advance.

[willigogs]

With the number of problems you appear to be having with this one page, I would honestly consider re-writing from scratch rather than trying to hack the old code to fit the requirements

[samarth]

With the number of problems you appear to be having with this one page, I would honestly consider re-writing from scratch rather than trying to hack the old code to fit the requirements

Hey willigogs,
I have written the code of that design from scratch. It is working well now only problem is rendering the formpanel into that table.

[willigogs]

Please provide some example code of how you have achieved this, as this will help for anyone to offer help.

Using tables for layout is quite an old methodology, and I would always recommend using DIVs instead - but I guess this depends on your individual requirement. If you're using an EXT viewport, it really would be much simpler to use a border layout for your panels instead, rather than manually coding the HTML elements and using renderTo.

[samarth]

Please provide some example code of how you have achieved this, as this will help for anyone to offer help.

Using tables for layout is quite an old methodology, and I would always recommend using DIVs instead - but I guess this depends on your individual requirement. If you're using an EXT viewport, it really would be much simpler to use a border layout for your panels instead, rather than manually coding the HTML elements and using renderTo.

Hi willigogs,
I have used viewport only with border layout

xtype:'panel',
html:'<table width="90%" border="1" align="center" border="0">
<tr><td width="9%">'+
'<img src="../image_28.gif" width="100%" height="258" /></td>'+
'<td width="24%">In this space i need a formpanel</td><td width="66%">
<img src="../images_29.gif" width="100%" height="258" /></td></tr></table>',
items:[{
        xtype:'panel',
        items:[loginForm]
    }]

[willigogs]

You can't have "html" and "item" configs on one panel (which are you wanting to display?!)

Remove the html config altogether. You also don't need the child item to be another panel, with the form inside of it - that is just needless overnesting. Just add the formpanel directly to the parent panel "item" config.

[samarth]

You can't have "html" and "item" configs on one panel (which are you wanting to display?!)

Remove the html config altogether. You also don't need the child item to be another panel, with the form inside of it - that is just needless overnesting. Just add the formpanel directly to the parent panel "item" config.

Hi willigogs,
Can you please give one example for this. It will help me

[sword-it]

Hi,

You can put your Panel/FormPanel as a single external component using renderTo property which should be set as id of the element/container that exists in your td element.

{
xtype: 'panel',
html: ....
 + '<td><div id="formPanelWrapper"></div></td>'
 + ...
listeners: {
afterrender: function(){
var myForm = new Ext.form.FormPanel({
...
renderTo: 'formPanelWrapper'
...
});
}
}
}

If that does not work, let me know so i can provide you another solution.

Regards.

[samarth]

Hi,

You can put your Panel/FormPanel as a single external component using renderTo property which should be set as id of the element/container that exists in your td element.

{
xtype: 'panel',
html: ....
 + '<td><div id="formPanelWrapper"></div></td>'
 + ...
listeners: {
afterrender: function(){
var myForm = new Ext.form.FormPanel({
...
renderTo: 'formPanelWrapper'
...
});
}
}
}

If that does not work, let me know so i can provide you another solution.

Regards.

Hi sword-it i will try your code..

Thanks for your reply