KRavEN
12 Jun 2007, 11:40 AM
I need to be able to add form items to an already rendered form. I've figured out how to do it and have it working but I ran into a behavior that I don't understand.
I have a function that gets called when I click a button. Below I've broken down the function.
First I add a form container
vipStart = form.container({width:410});
2 elements under it:
form.column({width:285},
appVipBox = new Ext.form.TextField({
fieldLabel: 'VIP IP',
name: 'appVIPIp',
width: 100
}));
form.column({width:70, labelWidth:25},
appVipPort = new Ext.form.TextField({
fieldLabel: 'Port',
name: 'appVIPPort',
width:38
}));
and then close the container:
vipEnd = form.end()
I get the already rendered element with:
vipBox = Ext.get(vipBlock.id);
So far so good. Now I render the container. This will create all the divs and the labels but not the inputs.:
vipStart.render(vipBox);
To create the input fields I render the close:
vipEnd.render(vipBox);
Now the problem and possible bug with this is that it ends up rendering any form.button I have to the bottom of the elements I just added. The buttons were added to the form prior to the first render. Should this be happening?
I work around it by rendering the inputs separately instead of rendering vipEnd. This seems like something I would think I shouldn't have to do since just rendering the close does the same thing except it undesirably adds the buttons:
appVipBox.render(vipBox.dom.lastChild.childNodes[0].firstChild.lastChild.id);
appVipPort.render(vipBox.dom.lastChild.childNodes[1].firstChild.lastChild.id);
vipBox.createChild({tag: 'div', cls: 'x-form-clear'});
I have a function that gets called when I click a button. Below I've broken down the function.
First I add a form container
vipStart = form.container({width:410});
2 elements under it:
form.column({width:285},
appVipBox = new Ext.form.TextField({
fieldLabel: 'VIP IP',
name: 'appVIPIp',
width: 100
}));
form.column({width:70, labelWidth:25},
appVipPort = new Ext.form.TextField({
fieldLabel: 'Port',
name: 'appVIPPort',
width:38
}));
and then close the container:
vipEnd = form.end()
I get the already rendered element with:
vipBox = Ext.get(vipBlock.id);
So far so good. Now I render the container. This will create all the divs and the labels but not the inputs.:
vipStart.render(vipBox);
To create the input fields I render the close:
vipEnd.render(vipBox);
Now the problem and possible bug with this is that it ends up rendering any form.button I have to the bottom of the elements I just added. The buttons were added to the form prior to the first render. Should this be happening?
I work around it by rendering the inputs separately instead of rendering vipEnd. This seems like something I would think I shouldn't have to do since just rendering the close does the same thing except it undesirably adds the buttons:
appVipBox.render(vipBox.dom.lastChild.childNodes[0].firstChild.lastChild.id);
appVipPort.render(vipBox.dom.lastChild.childNodes[1].firstChild.lastChild.id);
vipBox.createChild({tag: 'div', cls: 'x-form-clear'});