I am using com.extjs.gxt.ui.client.widget.form.FormPanel for uploading a file. Now my requirement has been changed and I need to give a new option/button to user for adding more files to upload in single submit?
I tried to add a new FileUploadField() on submit of a button in my FormPanel, but it is not being added in UI.
Please help me and let me know how can I add dynamic fields in a FormPanel?
Thanks Sven... Its worked...
Plz suggest also, which layout to use for FormPanel or container having FormPanel so that its height get adjusted automatically by adding/removing fields dynamically?
No layout which actually does any work can do that - Layout subclasses are to size their children based on the space they are given, and so cannot be told to work in the reverse way . Additionally, FormPanel has a FormLayout already - this isn't a matter of using the proper Layout, but instead how you choose to build components up after layout has occurred.
Sven's idea should work in your case, but keep in mind that using this as a general solution could be very expensive. If you want to set up multiple LayoutContainers with FormLayouts, each with this functionality, consider making a ComponentPlugin which, after render, watches for add/remove events, and fires layout on the container, or (optionally) some parent of the container, as to get all sibling components laid out correctly.
Once you add form elements, and if they are named, their value should be passed automatically via submission.
The best way to add form elements is via the DOM:
Code:
var newInput=document.createElement('input');
newInput.name='myNewInput'
document.forms.myform.appendChild(newInput);
Here is a very basic working example:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function add_input(){
var newInput=document.createElement('input');
newInput.name='myNewInput';
document.forms.myform.appendChild(newInput);
}
</script>
</head>
<body>
<form name="myform" action="#">
<input type="submit" value="submit">
<input type="text" name="art" onchange="add_input();">
</form>
</body>
</html>
How to add dynamic fields in FormPanel1
. Additionally, FormPanel has a FormLayout already - this isn't a matter of using the proper Layout, but instead how you choose to build components up after layout has occurred.
Reply With Quote