1. #1
    Sencha User
    Join Date
    Sep 2008
    Posts
    43
    Vote Rating
    0
    Northie is on a distinguished road

      0  

    Default Adding and removing form elements

    Adding and removing form elements


    =============== EDIT ===============

    Ext 3.0.3
    jquery 1.3.2 (not using this doesn;t prevent the error)

    =============== /EDIT ===============

    I'm new(ish) to extjs, and still haven't got my head round a lot of it.

    Anyway, I'm having a bit of a problem.

    I've got a form that I've built using extjs.
    In the form I have a button that adds a fieldset to the form.
    This fieldset is defined as an object, in a function and is given a unique (html) id by my code.
    It (the fieldset) gets added to the form using the formPanel's add() method

    This way I can add several new fieldsets. This works almost perfectly.

    I then have a link in each new fieldset (tried a button as well - but the result is the same). On click of this link/button I want the fieldset to be removed.

    using the remove() method the fieldset gets removed. (I've tried both Ext.remove() and fieldset.remove())

    Okay so far, but:

    After the removal of one or more fieldsets, the "Add New" functionality stops working (it doesn't add any new fieldsets) and in firefox/firebug I get the error

    operation is not supported" code: "9

    [googling this does not bring back anything I can understand/make use of]

    Any advice on the matter would be incredibly useful.

    I understand that I may not even be tackling this in the right way, so if anyone can think of a 'better' way to go about what I'm trying to do then I'd love to hear it

    Thanks

  2. #2
    Sencha User MiamiCoder's Avatar
    Join Date
    Mar 2009
    Location
    Miami, FL
    Posts
    142
    Vote Rating
    2
    MiamiCoder is on a distinguished road

      0  

    Default


    Can you post sample code reproducing the problem?

  3. #3
    Sencha User
    Join Date
    Sep 2008
    Posts
    43
    Vote Rating
    0
    Northie is on a distinguished road

      0  

    Default


    Here is the code I am using. I am also in the process of uploading everything to a live test server so that you can see what i have in action. Will post link when upload complete

    This 'version' is using links in the fieldsets, which get picked up by my jQuery delegate plugin (bottom of code)

    Code:
    $(function() {
    	i = 0;
    	
    	new_form_field = {};
    	fsf = {};
    
    	Ext.onReady(function(){
    
    		Ext.QuickTips.init();
    
    		// turn on validation errors beside the field globally
    		Ext.form.Field.prototype.msgTarget = 'side';
    
    		var bd = Ext.getBody();
    
    		function AddNewFormField(j) {
    			new_form_field = {
    				id:'new_field_'+j, //edit, changed from i to j - still no luck
    				xtype:'fieldset',
    				html:"<a href='#' class='removeField' rel='new_field_"+j+"'>Remove</a>",  //edit, changed from i to j - still no luck
    				title: 'New Field',
    				autoHeight:true,
    				defaultType: 'textfield',
    				items :[{
    					fieldLabel: 'Field Name',
    					name: 'inputname[]'
    				},{
    					xtype:'combo',
    					blankText:'Please Select...',
    					editable:false,
    					forceSelection:true,
    					fieldLabel: 'Field Type',
    					name: 'inputType[]',
    					store: [
    							['text','Text (1 line)'],
    							['textarea','text (Multiline)'],
    							['select','Select Menu (drop-down box)'],
    							['checkbox','Check Boxes (multi select)'],
    							['radio','Radio Buttons (Single Select)'],
    							['password','Password (Hidden 1 Line Text)'],
    							['button','Button'],
    							['file','File Upload'],
    							['reset','Reset (clears data)']
    						],
    					listeners: {
    						'select': function(a,b,c){
    							var showEl = b.json[0]+"_"+j;												
    							$("#"+showEl).removeClass('x-hide-display');
    							return false;
    						}
    					}
    
    				},{
    					id:'text_'+i,
    					xtype:'fieldset',
    					title:'Text Input',
    					autoHeight:true,
    					defaultType: 'textfield',
    					hidden:true,
    					items:[{
    						fieldLabel:'Size',
    						name:'inputTypeTextSize[]'
    					},{
    						fieldLabel:'Default Value',
    						name:'inputTypeTextValue[]'
    					}]
    				},{
    					id:'textarea_'+i,
    					xtype:'fieldset',
    					title:'Textarea',
    					autoHeight:true,
    					defaultType: 'textfield',
    					hidden:true,
    					items:[{
    						fieldLabel:'Default Value',
    						name:'inputTypeTextareaValue[]'
    					},{
    						fieldLabel:'Rows',
    						name:'inputTypeTextareaRows[]'
    					},{
    						fieldLabel:'Columns',
    						name:'inputTypeTextareaCols[]'				
    					}]
    				},{
    					id:'select_'+i,
    					xtype:'fieldset',
    					title:'Select menu / Drop Down Menu',
    					autoHeight:true,
    					defaultType: 'textfield',
    					hidden:true,
    					items:[{
    						xtype:'textarea',
    						grow:true,
    						height:100,
    						width:300,
    						fieldLabel:'Options (1 per line)',
    						name:'inputTypeSelectOptions[]'
    					},{
    						xtype:'checkbox',
    						fieldLabel:'Allow Multiple Select?',
    						name:'inputTypeSelectMultiple[]'
    						
    					},{
    						fieldLabel:'Number of viewable options (if multi-select)?',
    						name:'inputTypeSelectCount[]'
    					}]
    				}]
    			};
    			
    			fsf.add(new_form_field);
    			fsf.doLayout();
    		}
    
    		//bd.createChild({tag: 'h2', html: 'New Form'});
    
    		fsf = new Ext.FormPanel({
    			//labelWidth: 75, // label settings here cascade unless overridden
    			standardSubmit:true,
    			url:'save-form.php',
    			frame:true,
    			title: 'New Form Definition',
    			bodyStyle:'padding:5px 5px 0',
    			width: '100%',
    			items: [{
    				xtype:'fieldset',
    				title: 'Basic Form Details',
    				autoHeight:true,
    				defaults: {width: 210},
    				defaultType: 'textfield',
    				items :[{
    					fieldLabel: 'Form Name',
    					name: 'form_name',
    					allowBlank:false
    				},{
    					fieldLabel: 'QMS Form Name',
    					name: 'qms_name',
    					allowBlank:false
    				},{
    					fieldLabel: 'Default mailbox',
    					name: 'mailbox'
    				}]
    			}],
    			buttons: [{
    				text: 'Add New Field',
    				handler:function() {
    					i++;
    					AddNewFormField(i);
    				}
    			},{
    				text: 'Save',
    				handler:function() {
    					var fp = this.ownerCt.ownerCt,
    					form = fp.getForm();
    					fp.doLayout();
    					form.submit();
    				}
    			},{
    				text: 'Cancel'
    			}]
    		});
    
    		fsf.render(document.body);
    	});
    });
    
    $.delegate(".removeField",'click',function(){
    	var el_ref = $(this).attr('rel');
    	var el = Ext.get(el_ref);
    	el.remove();
    	fsf.doLayout();
    });

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    It's hard to determine what you're doing witout code.

    Here is a link to a video tutorial on how to use the Add/remove features of Container:

    http://www.extjs.com/forum/showthread.php?t=57233

  5. #5
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    you need to not remove the element of the fieldset, but *destroy* it's component.

    fsf.remove(Ext.getCmp('new_field_<numHere>'));
    No need to call doLayout after a component has been removed.

    All of this is detailed in that video

  6. #6
    Sencha User
    Join Date
    Sep 2008
    Posts
    43
    Vote Rating
    0
    Northie is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    you need to not remove the element of the fieldset, but *destroy* it's component.

    fsf.remove(Ext.getCmp('new_field_<numHere>'));
    No need to call doLayout after a component has been removed.

    All of this is detailed in that video
    I tried destroy, same result - , but I'll try

    fsf.remove(Ext.getCmp('new_field_<numHere>'));

    and see what happens

  7. #7
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    You can't destroy the item without removing it from it's container first.

    Remove automatically destroys the item.

  8. #8
    Sencha User
    Join Date
    Sep 2008
    Posts
    43
    Vote Rating
    0
    Northie is on a distinguished road

      0  

    Default


    Thanks for sticking with me on this, but I'm really confused - sorry, I said i was new to this!

    What's the difference between 'remove' and 'destroy'?

    Where can I read up on what Ext says are 'components' of an element?

    In my case, if the fieldsets are elements, what are the components and how to I get rid of them?

  9. #9
    Sencha User
    Join Date
    Sep 2008
    Posts
    43
    Vote Rating
    0
    Northie is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    It's hard to determine what you're doing witout code.

    Here is a link to a video tutorial on how to use the Add/remove features of Container:

    http://www.extjs.com/forum/showthread.php?t=57233
    Watched the video, really nice and interesting, but couldn't see how to apply it to my code.

    Might have to do a bit more reading and then start again with a different approach

  10. #10
    Sencha User
    Join Date
    Sep 2008
    Posts
    43
    Vote Rating
    0
    Northie is on a distinguished road

      0  

    Default


    This line works

    fsf.remove(Ext.getCmp('new_field_<numHere>'));

    I modifed my jQuery code to look like

    Code:
    $.delegate(".removeField",'click',function(){
    	var el_ref = $(this).attr('rel');
    	fsf.remove(Ext.getCmp(el_ref));
    	return false;
    });
    many thanks