Add field to a form with a column layout

[kevincote]

Hi,

I have a form panel with a 2 column layout. In the first colum, I have several number fields and a button that I want to use to create extra number fields in the same column.

How can I achieve that ? Actually, the new field generated replace both columns of my layout instead of just adding a row to my form.

Here is my code:

		var theForm = Ext.create('Ext.panel.Panel', {
		title: 'Predifined levels',
		id: 'formPanel',
		bodyPadding: 5,
		collapsible: true,
		layout: 'column',
		items: [{
			xtype: 'form',
			defaultType: 'textfield',
			columnWidth: 0.90,
			title: 'Level definition',
			id: 'column1',
			items: [{
				fieldLabel: 'Level-1',
				name: 'l1',
				allowBlank: true
			},{
				fieldLabel: 'Level-2',
				name: 'l2',
				allowBlank: true
			},{
				fieldLabel: 'Level-3',
				name: 'l3',
				allowBlank: true
			},{
				fieldLabel: 'Level-4',
				name: 'l4',
				allowBlank: true
			},{
				fieldLabel: 'Level-5',
				name: 'l5',
				allowBlank: true
			}, {
				xtype: 'toolbar',
				dock: 'bottom',
				ui: 'footer',
				items: [{ 
					xtype: 'component', 
					flex: 1
					}, { 
						xtype: 'button', 
						text: 'Add field',
						listeners: {
							click: function(){
							var newGapField = new Ext.create('Ext.form.field.Text', {
								fieldLabel: 'New level:',
								allowBlank: true,
								anchor: '100%',
								});
							theForm.add(newGapField);
							}
						}
					}
				]
			}],
		}, {
			columnWidth: 0.10,
			title: '#'
		}]	
	});

[evant]

You're adding it to the wrong container:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var theForm = Ext.create('Ext.panel.Panel', {
            renderTo: document.body,
            title: 'Predifined levels',
            bodyPadding: 5,
            collapsible: true,
            layout: 'column',
            items: [{
                xtype: 'form',
                itemId: 'foo',
                defaultType: 'textfield',
                columnWidth: 0.90,
                title: 'Level definition',
                id: 'column1',
                fbar: [{
                    xtype: 'button',
                    text: 'Add field',
                    handler: function() {
                        theForm.down('#foo').add({
                            xtype: 'textfield',
                            fieldLabel: 'New level:',
                            allowBlank: true,
                            anchor: '100%',
                        });
                    }
                }],
                items: [{
                    fieldLabel: 'Level-1',
                    name: 'l1',
                    allowBlank: true
                }, {
                    fieldLabel: 'Level-2',
                    name: 'l2',
                    allowBlank: true
                }, {
                    fieldLabel: 'Level-3',
                    name: 'l3',
                    allowBlank: true
                }, {
                    fieldLabel: 'Level-4',
                    name: 'l4',
                    allowBlank: true
                }, {
                    fieldLabel: 'Level-5',
                    name: 'l5',
                    allowBlank: true
                }]
            }, {
                columnWidth: 0.10,
                title: '#'
            }]
        });
    }
});

[kevincote]

Works fine, thanks again evant!

[kevincote]

Another little question regarding the buttons at the bottom of a form. Is it possible to set a custom width value using the fbar config or do I have to do it using the long version ?