simonspitz
22 Jun 2007, 1:10 AM
Hi everybody. I've encountered some weird behavior of the form/fieldset classes.
I try to append a new fieldset to a previously rendered form.
This is the dynamically generated form:
MYFORM = function(){
var myForm;
return {
init : function(){
this.myForm = new Ext.form.Form({
labelAlign: 'left',
labelWidth: 200,
method: 'post',
url: '[some url]'
});
<?php foreach ($this->production_data as $key => $val): ?>
var fieldset = new Ext.form.FieldSet(
{legend:'Title: <?php echo $this->escape($val['title']); ?>'}
);
this.myForm.start(fieldset);
this.myForm.add(
new Ext.form.TextField({
fieldLabel: 'Title',
name: 'title_<?php echo $this->escape($val['id']); ?>',
width: 160,
value: '<?php echo $this->escape($val['title']); ?>'
})
);
this.myForm.end();
<?php endforeach; ?>
this.myForm.render('myForm');
} // END init
};
}();
Ext.EventManager.onDocumentReady(MYFORM.init, MYFORM, true);
in another class in this script I have a button to append a new fieldset to the form:
var button = new Ext.Button('button_new', {
text: 'Append fieldset',
handler: function(){
var fs = new Ext.form.FieldSet({
autoCreate: true,
clear: true,
labelAlign: 'left',
legend: 'foo label'
});
var form = MYFORM.myForm;
form.start(fs);
form.add(
new Ext.form.TextField({
fieldLabel: 'Title',
name: 'title_new',
width: 160,
value: '...'
}));
form.end();
form.render('myForm');
}
});
So far so good, but unfortunately the new fieldset is appended outside the form...
Even experimenting with getting the last generated dom element with
this.lastFieldSet = fieldset.getId();
in the MYFORM class and then trying to append
Ext.DomHelper.insertAfter(MYFORM.lastFieldSet, { tag: 'div', id: 'new_fieldset'});
....
fs.render('new_fieldset');
in the button function didn't have influence on the behavior.
It would be cool to know if this is a bug.
Cheers and big thanks
I try to append a new fieldset to a previously rendered form.
This is the dynamically generated form:
MYFORM = function(){
var myForm;
return {
init : function(){
this.myForm = new Ext.form.Form({
labelAlign: 'left',
labelWidth: 200,
method: 'post',
url: '[some url]'
});
<?php foreach ($this->production_data as $key => $val): ?>
var fieldset = new Ext.form.FieldSet(
{legend:'Title: <?php echo $this->escape($val['title']); ?>'}
);
this.myForm.start(fieldset);
this.myForm.add(
new Ext.form.TextField({
fieldLabel: 'Title',
name: 'title_<?php echo $this->escape($val['id']); ?>',
width: 160,
value: '<?php echo $this->escape($val['title']); ?>'
})
);
this.myForm.end();
<?php endforeach; ?>
this.myForm.render('myForm');
} // END init
};
}();
Ext.EventManager.onDocumentReady(MYFORM.init, MYFORM, true);
in another class in this script I have a button to append a new fieldset to the form:
var button = new Ext.Button('button_new', {
text: 'Append fieldset',
handler: function(){
var fs = new Ext.form.FieldSet({
autoCreate: true,
clear: true,
labelAlign: 'left',
legend: 'foo label'
});
var form = MYFORM.myForm;
form.start(fs);
form.add(
new Ext.form.TextField({
fieldLabel: 'Title',
name: 'title_new',
width: 160,
value: '...'
}));
form.end();
form.render('myForm');
}
});
So far so good, but unfortunately the new fieldset is appended outside the form...
Even experimenting with getting the last generated dom element with
this.lastFieldSet = fieldset.getId();
in the MYFORM class and then trying to append
Ext.DomHelper.insertAfter(MYFORM.lastFieldSet, { tag: 'div', id: 'new_fieldset'});
....
fs.render('new_fieldset');
in the button function didn't have influence on the behavior.
It would be cool to know if this is a bug.
Cheers and big thanks