Results 1 to 4 of 4

Thread: Add field to a form with a column layout

  1. #1
    Sencha User
    Join Date
    Jan 2016
    Posts
    11
    Answers
    1

    Default Answered: Add field to a form with a column layout

    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:

    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: '#'
    		}]	
    	});

  2. You're adding it to the wrong container:

    Code:
    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: '#'
                }]
            });
        }
    });

  3. #2
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    You're adding it to the wrong container:

    Code:
    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: '#'
                }]
            });
        }
    });

  4. #3
    Sencha User
    Join Date
    Jan 2016
    Posts
    11
    Answers
    1

    Default

    Works fine, thanks again evant!

  5. #4
    Sencha User
    Join Date
    Jan 2016
    Posts
    11
    Answers
    1

    Default

    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 ?

Similar Threads

  1. [3.0] Ext.ux.layout.TableFormLayout - table layout with form field labels
    By JamesC in forum Ext 3.x: User Extensions and Plugins
    Replies: 42
    Last Post: 8 Dec 2011, 7:30 AM
  2. field set with column layout
    By TheMonolith in forum Ext 3.x: Help & Discussion
    Replies: 9
    Last Post: 1 Mar 2010, 2:46 AM
  3. Replies: 1
    Last Post: 28 May 2009, 4:49 PM
  4. form layout/rendering problem with column layout
    By tyr in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 4 Jan 2008, 12:44 AM
  5. Form column layout/Nested layout issues?
    By dev in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 9 Dec 2007, 2:05 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •