View Full Version : Dynamic add item ???

21 Feb 2008, 7:17 AM

I need dynamic add textfield in rendered form.
How i can do this?
can simpler show hidden forum ?
This is my code:

var add_firm = new Ext.FormPanel({
labelAlign: 'top',
title: 'Добавление новой фирмы',
bodyStyle:'padding:5px 5px 0',
width: 600,
items: [{
new Ext.form.ComboBox({
fieldLabel : 'Статус',
name : 'status',
store: status_list,
displayField: 'name',
valueField: 'id',
mode: 'local',
allowBlank: false,
emptyText: 'Выберите статус...',
listeners: {
'select': function() {
// here i want add field if

// this field must be visible, when will choose a necessary value
fieldLabel: 'полное',
name: 'name_full',
minLength: 3,
maxLength: 100,
allowBlank: false,
setVisible: false // or true

21 Feb 2008, 10:05 AM
Create the field
Add the field to the container
Call doLayout on the container

18 Mar 2008, 11:33 PM
thank ancoran for your clue,
and now i can make an element of form on the fly

3 May 2008, 1:04 PM
What if I have a complex form with tabs and want to add field to specified tab.
Can I make that?
this is example of my form

form = new Ext.form.FormPanel({
labelAlign: 'left',
labelWidth: 100,
border: false,
buttonAlign: 'right',
frame: false,
autoScroll: true,
items: {
xtype: 'tabpanel',
activeTab: 0,
layoutOnTabChange: true,
deferredRender: false,
border: false,
defaults: {
autoHeight: true,
bodyStyle: 'padding:10px'
items: [{
title: 'General',
layout: 'form',
items: [
here i have some static fields
}, {
title: 'Details',
layout: 'form',
labelWidth: 65,
items: [
it's the place where i want to add fields

5 May 2008, 2:14 AM

One way to do this would be to give the items in the formpanel an id and later get them via Ext.getCmp('yourId'):


items: [{
title: 'General',
layout: 'form',
items: [
here i have some static fields
}, {
title: 'Details',
// id to get this Panel
id: 'details',
layout: 'form',
labelWidth: 65,
items: [
its the place where i want to add fields


var detailItem = Ext.getCmp('details');
detailItem.add( newField );

Kind regards,

P.S.: I haven

18 Jul 2008, 10:12 AM
Hello! Nice tips.

But I'd like to remove some fields prior to add new ones. But so far I failed to do that.

My code:

function getDetails(sm, row, rec) {
// simple.doLayout();

var key = rec.get('id');
var fieldstore = new Ext.data.JsonStore({
autoLoad: true,
url: 'myurl.php,
root: 'results',
fields: ['id', 'field1', 'field2'],

fieldstore.on('load', function(store, records, options) {
var f = records;
var i;
for (i = 0; i < f.length; i++) {
var e = new Ext.form.TextField({
id: f[i].get('id'),
fieldLabel: f[i].get('field1'),
value: f[i].get('field2'),
width: 475,
allowBlank: true
// simple.getForm().render();

grid_panel.getSelectionModel().addListener('rowselect', getDetails);

How do I get rid of the "old" fields from the form? All I get is new fields beign added.
Using Firebug I noticed that the form's items collection is actually cleared, but it still render the old fields.

18 Jul 2008, 11:45 AM
Nevermind... Just found this: http://extjs.com/forum/showthread.php?t=25479