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

  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
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    80
    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
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    80
    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
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    80
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."