PDA

View Full Version : FormPanel Render to HTML Table



samarth
28 May 2012, 2:38 AM
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
28 May 2012, 3:06 AM
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 :D

samarth
28 May 2012, 3:10 AM
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 :D

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
28 May 2012, 3:30 AM
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
28 May 2012, 3:57 AM
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
28 May 2012, 5:06 AM
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
28 May 2012, 5:21 AM
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
28 May 2012, 5:24 AM
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
28 May 2012, 5:26 AM
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